Bootstrap折叠手风琴悬停不一致

Question

我正在创建一个手风琴，当用户将鼠标悬停在手风琴的标题上时，该手风琴会折叠/打开。到目前为止，我的代码在某种程度上是有效的。问题是，当鼠标进入时，手风琴总是打开的，但有时在关闭时确实不一致（尤其是当用户移动鼠标非常快时）。

这是该网站的链接http://infotree.co.uk/（手风琴在左边）将问题可视化-将鼠标快速移动到左边的手风琴上。

这是我在html文档中的一个手风琴选项卡的代码：

<div class="panel panel-default">
        <div class="panel-heading" role="tab">
          <h4 class="panel-title accordionTitles1" id="headOne1"><a data-toggle="collapse" data-parent="#accordion1" href="#collapseOne1">Search</a></h4>
        </div>
        <div id="collapseOne1" class="panel-collapse collapse in">
          <div class="panel-body">Search to find specific content to learn about.</div>
        </div>
</div>

与之配套的java脚本：

$(document).ready(function() {
 $("#headOne1").hover(function() {
    $('#collapseOne1').collapse('show');
 }, function() {
    $('#collapseOne1').collapse('hide');
 }
 );
});   

Answer 1

通过你提到的上一个手风琴问题（悬停时Bootstrap折叠手风琴），我发现一个人的答案与我遇到的问题有关，这让我意识到了确切的原因。问题是与动画计时有关，所以如果在折叠动画完成之前离开折叠区域，jquery永远不会运行折叠函数。解决方案是使用队列和出列方法来确保所有函数都能正确运行，并按正确的顺序运行。

以下是一个选项卡的HTML代码：

<div class="panel panel-default">
      <a href="http://www.google.com" class="sidebarButtons" id="sidebarButton1">Search</a>
      <div id="sidebarContent1" class="panel-collapse collapse">
        <div class="panel-body">Search to find specific content to learn about.</div>
      </div>
    </div>

以及相应选项卡的java脚本：

$(document).ready(function() {
var button1 = $("#sidebarButton1");
var content1 = $("#sidebarContent1");
button1.mouseenter(function() {     
    content1.queue('collapsequeue',function(){
        content1.collapse('show');
    });
    if (!content1.hasClass("collapsing")) {
        content1.dequeue("collapsequeue");
    }
});
button1.mouseleave(function() { 
    content1.queue('collapsequeue',function(){
        content1.collapse('hide');
    });
    if (!content1.hasClass("collapsing")) {
        content1.dequeue("collapsequeue");
    }
});
content1.on("shown.bs.collapse hidden.bs.collapse", function(){
    content1.dequeue("collapsequeue");
});
});

.requeue（）命名队列并向队列添加函数，.dequeue（（）只是运行队列。该代码并不完全完美，因为它违反了DRY编码（很像我在悬停时在Bootstrap Collapse Accordoon中发现的响应）——这是因为我不能在元素中使用href标记，因为我需要它，这样我就可以链接到不同的网页，而不是包含隐藏内容的div元素。

关于缩短代码/提高代码效率有什么想法吗？我必须为每个选项卡重复JS，我觉得可能有比我想出的更好的方法来做到这一点。

Answer 2

这个问题以前已经回答过了：引导折叠悬停上的手风琴

如果你不想要/需要花哨的动画，你也可以使用纯CSS：https://jsfiddle.net/vvu5ozh1/4/有了CSS转换，你甚至可以制作动画，但这会有点复杂。

<div class="panel">
<div class="title">
Title1
</div>
<div class="content">
COntent1
</div>
</div>
<div class="panel">
<div class="title">
Title2
</div>
<div class="content">
COntent2
</div>
</div>
.panel:hover .content {
  display:block;
}
.content {
  display: none;
}