Bootstrap 手风琴并不总是在 Google 地图侦听器事件时折叠

Bootstrap accordion doesn't always collapse on Google Maps listener event

只有当指针悬停在 Google 地图上时，如何让 Bootstrap 手风琴显示（即平滑 "unroll" 本身），并隐藏（即平滑 "collapse"本身）什么时候离开地图？

我将 .collapse('show') 附加到 mousemove 事件，并将 .collapse('hide') 附加到 mouseout，但这仅在指针 缓慢 [=24] 时有效=] 进入或退出地图。当动作很快时（比如在地图上快速滑动），手风琴会在大约 50% 的时间内保持显示。

下面是完整的代码，说明了我的意思：

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
    <script src="https://maps.googleapis.com/maps/api/js"></script>
    <style>
      #map-canvas {
        width: 500px;
        height: 400px;
      }
    </style>
    <script>
      function initialize() {
        var mapCanvas = document.getElementById('map-canvas');
        var mapOptions = {
          center: new google.maps.LatLng(45.816175, 15.966154),
          zoom: 17
        }
        var map = new google.maps.Map(mapCanvas, mapOptions);
        google.maps.event.addListener(map, 'mousemove', function(){
          $('#acc').collapse('show');
        });
        google.maps.event.addListener(map, 'mouseout', function(){
          $('#acc').collapse('hide');
        });
      }
      google.maps.event.addDomListener(window, 'load', initialize);
    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
    <div id="acc" class="accordion-body collapse">
      <div class="accordion-inner">
        <h1>aaaaaaaaaaaaaaaaaaaaaaaa</h1>
      </div>
    </div>
  </body>
</html>

这种基于 JQuery 的方法似乎在鼠标快速移动时更流畅。

$( "#map-canvas" ).hover(
  function() { 
    $('#acc').show();
  }, function() {
    $('#acc').hide();
  });

Javascript.info说"Mousemove and mouseover/mouseout trigger when browser internal timing allows."可能跟效率有关系吧

有 2 个问题：

  1. 您没有使用适当的事件。 mousemove 会在您在地图上移动鼠标时随时触发，并且 mouseout 也会在您悬停时触发，例如地图控件或 google-logo/copyrights。您最好使用地图容器的 mouseenter/mouseleave-事件

  2. 当您快速移入和移出鼠标时，转换之间会发生冲突，您开始一个新的动画，而另一个动画仍然是 运行。 我没有找到用 bootstrap 停止 运行 动画的选项，所以我建议改用 jQuery 的 slideUp/slideDown。效果是一样的，但是 jQuery 有一个停止 运行 动画的方法： $.stop()

要实施的更改：

1) 删除 Bootstrap 手风琴 class，因为似乎没有办法停止 roll/unroll 动画（请注意，最初使用 display:none风格）：

<div id="acc" style="display: none;">
  <h1>aaaaaaaaaaaaaaaaaaaaaaaa</h1>
</div>

2) 将 "unroll" 事件处理程序替换为 

google.maps.event.addDomListener(map.getDiv(), 'mouseenter', function(){
     $('#acc').stop().slideDown('slow');
});

或

google.maps.event.addListener(map, 'mouseover', function(){
    $('#acc').stop().slideDown('slow');
});

3) 将 "roll-up" 事件处理程序替换为：

google.maps.event.addDomListener(map.getDiv(), 'mouseleave', function(){
     $('#acc').stop().slideUp('slow');
});