Bootstrap Collapse Accordion Hover 不一致

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 折叠手风琴悬停

如果你不想要/不需要花哨的动画，你也可以使用纯 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;
}

Answer 2

通过您提到的上一个手风琴问题（ 悬停时 Bootstrap 折叠手风琴），我找到了一个与我遇到的问题相关的答案，这让我意识到了确切原因。 问题与动画时间有关，因此如果在折叠动画完成之前离开折叠区域，jquery 永远不会运行折叠功能。 解决方案是使用 queue 和 dequeue 方法来确保所有功能正常运行并以正确的顺序运行。

这是一个选项卡的 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");
});
});

.queue() 命名队列以及向队列添加函数，.dequeue() 只是运行队列。 该代码并不完全完美，因为它与 DRY 编码背道而驰（很像我在悬停时 Bootstrap Collapse 手风琴中找到的响应） - 这是因为我无法在元素中使用 href 标签，因为我需要这样我可以链接到不同的网页，而不是包含隐藏内容的 div 元素。

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