bootstrap下拉不能正常工作懸停

Question

我做了一個下拉使用摺疊類，其中我已經添加了一個類「崩潰」在上滑和下滑。擴展後，它添加了「in」類。我已經讓這個坍塌的財產在懸停工作。現在它會產生一個問題，就好像我在多個元素上快速移動，然後所有元素都會擴展。但我只想一次打開一個元素以便正常工作。這個問題基本上是在添加collapsing類時創建的，因爲collapsing類會給出時間來擴展多個元素。這裏是我的代碼：

<style> 

    .icon_images { 
     display: inline-block; 
     height: 32px; 
     margin-left: -9px; 
     margin-top: 3px; 
     width: 32px; 
    } 
    .admin_icon_cell { 
     background-color: rgba(149, 149, 149, 0.6); 
     background-position: right center; 
     background-repeat: no-repeat; 
     display: table-cell; 
     height: 46px; 
     text-align: center; 
     vertical-align: middle; 
     width: 68px; 
    } 
    .admin_menu_cell { 
     background-color: rgb(205, 205, 205); 
     color: #333333; 
     display: table-cell; 
     font-family: "Arial"; 
     font-size: 11px; 
     font-weight: bold; 
     padding-left: 10px; 
     vertical-align: middle; 
     width: 150px; 
    } 
    .menu_bg { 
     border: 2px solid transparent; 
     cursor: pointer; 
     font-size: 94%; 
     margin-left: 3px; 
     margin-top: 15px; 
    } 
</style> 

的jQuery：

<script> 
    function ab() { 
     $('.li').hover(function() { 

      var child1 = $("div", this); 
      var child2 = $("ul", this); 
      // child1.removeClass('collapsed'); 
      child2.removeClass('collapse'); 
      var thisdiv = $(child1).attr("data-target"); 
      $(thisdiv).collapse("show"); 
      child2.addClass('in'); 
     }, function() { 
      var child1 = $("div", this); 
      var child2 = $("ul", this); 
      //child1.addClass('collapsed'); 
      //child2.removeClass('in'); 
      var thisdiv = $(child1).attr("data-target"); 
      $(thisdiv).collapse('hide'); 
      //child2.addClass('collapse'); 
     }); 
    } 
</script> 

HTML代碼：

<div id="wrapper" class="" style="height: 100%;"> 
<div style="background-color: #ffff00;width:255px;"> 
    <ul class="nav" style="height: 100%;"> 
     <li class="li"> 
      <div class="menu_bg" data-toggle="collapse" data-target="#radio2,.in"> 
       <div class="admin_icon_cell"> 
        <div class="icon_images sprite2"> 

        </div> 
       </div> 
       <div class="admin_menu_cell">hostel management</div> 
      </div> 
      <ul style="list-style: none;" class="collapse" id="radio2"> 
       <li><a href="#">Information &amp; Stats</a> 
       </li> 
       <li><a href="#">DJ Says</a> 
       </li> 
       <li><a href="#">Request Line</a> 
       </li> 
       <li><a href="#">Timetable</a> 
       </li> 
       <li><a href="#">Banned Songs</a> 
       </li> 
      </ul> 
     </li> 
     <li class="li"> 
      <div class="menu_bg" data-toggle="collapse" data-target="#radio3,.in"> 
       <div class="admin_icon_cell"> 
        <div class="icon_images sprite3"> 

        </div> 
       </div> 
       <div class="admin_menu_cell">User Management</div> 
      </div> 
      <ul style="list-style: none;" class="collapse" id="radio3"> 
       <li><a href="#">Information &amp; Stats</a> 
       </li> 
       <li><a href="#">DJ Says</a> 
       </li> 
       <li><a href="#">Request Line</a> 
       </li> 
       <li><a href="#">Timetable</a> 
       </li> 
       <li><a href="#">Banned Songs</a> 
       </li> 
      </ul> 
     </li> 
     <li class="li"> 
      <div class="menu_bg" data-toggle="collapse" data-target="#radio4,.in"> 
       <div class="admin_icon_cell"> 
        <div class="icon_images"> 
         <i class="fa fa-th-large fa-2x fa-spin" style=""></i> 
        </div> 
       </div> 
       <div class="admin_menu_cell">Library management</div> 
      </div> 
      <ul style="list-style: none;" class="collapse" id="radio4"> 
       <li><a href="#">Information &amp; Stats</a> 
       </li> 
       <li><a href="#">DJ Says</a> 
       </li> 
       <li><a href="#">Request Line</a> 
       </li> 
       <li><a href="#">Timetable</a> 
       </li> 
       <li><a href="#">Banned Songs</a> 
       </li> 
      </ul> 
     </li> 
    </ul> 
</div> 

Answer 1

我不知道我正確地理解你的代碼，但你可以刪除如果它開放的話，它會從兄弟姐妹身上坍塌。

<script> 
function ab() { 
    $('.li').hover(function() { 

     var child1 = $("div", this); 
     var child2 = $("ul", this); 
     // child1.removeClass('collapsed'); 
     child2.removeClass('collapse'); 
     var thisdiv = $(child1).attr("data-target"); 
     $(thisdiv).collapse("show"); 
     child2.addClass('in'); 

     // now close all open siblings 
     $(thisdiv).siblings().collapse("hide"); 

    }, function() { 
     var child1 = $("div", this); 
     var child2 = $("ul", this); 
     //child1.addClass('collapsed'); 
     //child2.removeClass('in'); 
     var thisdiv = $(child1).attr("data-target"); 
     $(thisdiv).collapse('hide'); 
     //child2.addClass('collapse'); 
    }); 
} 
</script> 

如果這不是你正在尋找的，你能提供一個JSfiddle嗎？