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，我覺得可能有比我想出的更好的方法來做到這一點。