javascript - Bootstrap Collapse Accordion Hover 不一致

Question

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

这是网站的链接 http://infotree.co.uk/ ( Accordion 在左边)可视化问题 - 将鼠标快速移到左边的 Accordion 上。

这是我在 html 文档中的一个 Accordion 选项卡的代码:

<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

通过您提到的上一个 Accordion 问题 ( 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，我觉得可能有比我想出的更好的方法来做到这一点。