Bootstrap Collapse Accordion Hover 不一致答案

【问题标题】：Bootstrap Collapse Accordion Hover is not consistentBootstrap Collapse Accordion Hover 不一致
【发布时间】：2016-12-07 18:42:58
【问题描述】：

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

这里是网站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');
 }
 );
});

【问题讨论】：

标签： javascript jquery html css twitter-bootstrap

【解决方案1】：

这个问题之前已经回答过：Bootstrap Collapse accordion on hover

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

【讨论】：

【解决方案2】：

通过您提到的上一个手风琴问题 (Bootstrap Collapse accordion on hover)，我找到了一个与我遇到的问题相关的答案，这让我意识到了确切的原因。问题与动画时间有关，因此如果在折叠动画完成之前离开折叠区域，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 accordion on hover 中找到的响应） - 这是因为我无法在元素中使用 href 标记，因为我需要它以便我可以链接到不同的网页，而不是包含隐藏内容的 div 元素。

有没有让代码更短/更高效的想法？我必须为每个标签重复 JS，我觉得可能有比我想出的更好的方法来做到这一点。

【讨论】：