出现在 div 之外的下拉菜单

Posted 2023-03-28

【中文标题】出现在 div 之外的下拉菜单

【英文标题】：Dropdown menu to appear outside of div

【发布时间】：2021-01-16 06:48:59

【问题描述】：

我想在我的 google map api 的信息窗口内放置一个按钮下拉菜单，但是，当我单击按钮激活下拉菜单时，它会出现在信息窗口内而不是在信息窗口外，这使得信息窗口可滚动。

信息窗口代码：

var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  var mapOptions = 
    zoom: 4,
    center: myLatlng
  ;

  var map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  var contentString = 
      `<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">Dropdown Example
  <span class="caret"></span></button>
  <ul class="dropdown-menu">
    <li><a href="#">html</a></li>
    <li><a href="#">CSS</a></li>
    <li><a href="#">javascript</a></li>
  </ul>
</div>`;

  var infowindow = new google.maps.InfoWindow(
      content: contentString
  );

  var marker = new google.maps.Marker(
      position: myLatlng,
      map: map,
      title: 'Uluru (Ayers Rock)',
//    zIndex: Math.round(myLatlng.lat() * -100000) << 5
  );
  google.maps.event.addListener(marker, 'click', function() 
    infowindow.setContent(contentString);
    infowindow.open(map,marker);
  );

这是一个演示：https://jsfiddle.net/zr52yo18/

我希望下拉菜单出现在信息窗口之外。

【参考方案1】：

添加以下 CSS 即可。

div.gm-style-iw 
  overflow: visible !important;
  padding: 20px !important;

div.gm-style-iw-d
  overflow: visible !important;

这里是演示：https://jsfiddle.net/gxay38dz/

【讨论】：

是的，但是如果列表变大，它就不起作用了

我已经更新了我的答案和小提琴链接，你可以试试这个，它会起作用的。