bootstrap açılırken düzgün çalışmaz

Question

Kaydırma ve kaydırakta bir sınıf "daraltma" eklediğim çöküş sınıfını kullanarak bir açılır menü yaptım. Genişlemeden sonra, "in" sınıfını ekler. Bu çöken mülkün vurguluda çalışması için yaptım. Şimdi birden fazla eleman üzerinde daha hızlı bir şekilde hover gibi bir problem yaratacak, sonra hepsi genişleyecek. ama sadece düzgün bir işleyiş için her seferinde bir eleman açmak istiyorum. çöken sınıfın birden fazla unsuru genişletmek için bir zaman sağlayacağı için bu problem temel olarak daraltma sınıfının eklenmesi sırasında yaratılır. İşte benim kodudur:

<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 kodu:

<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

ben Kodu doğru anladığımdan emin değilim, ama sen kaldırabilir açılırsa kardeşlerinden çöküyor.

<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> 

Bu sizin aradığınız şey değilse, bir JSfiddle sağlayabilir misiniz?