收起關閉其他當一個是開放的jQuery

Question

基本上，我有這樣的HTML代碼：

<ul id="menu_parent_1" class="collapse in"> 
    <li> 
     <a href="http://test.com" class="list-group-item index">PARENT TEST 00</a> 
    </li> 
    <li class="SubMenuParent"> 
     <a data-toggle="collapse" href="#menu_carrier" class="list-group-item carrier ">PARENT TEST 01</a> 
    </li> 
    <ul style="height: auto;" class="collapse SubMenu" id="menu_carrier"> 
     <li class="active"> 
      <a href="http://test.com">SubTest 011</a> 
     </li> 
     <li> 
      <a href="http://test.com">SubTest 012</a> 
     </li> 
     <li> 
      <a href="http://test.com">SubTest 012</a> 
     </li> 
    </ul> 
    <li class="SubMenuParent"> 
     <a data-toggle="collapse" href="#menu_customer" class="list-group-item customer ">PARENT TEST 02</a> 
    </li> 
    <ul style="height: auto;" class="collapse SubMenu in" id="menu_customer"> 
     <li class="active" style="background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.1);"> 
      <a href="http://test.com">SubTest 021</a> 
     </li> 
     <li> 
      <a href="http://test.com">SubTest 022</a> 
     </li> 

    </ul> 
    <li class="SubMenuParent"> 
     <a data-toggle="collapse" href="#menu_rules" class="list-group-item rules ">PARENT TEST 02</a> 
    </li> 
    <ul style="height: auto;" class="collapse SubMenu" id="menu_rules"> 
     <li class="active"> 
      <a href="http://test.com">SubTest1</a> 
     </li> 
    </ul> 
</ul> 

通過點擊PARENT TEST我想它的內容含義（及其子TEST）以silde下來，其他向上滑動。 這是我到目前爲止已經試過和不工作：

jQuery('.SubMenuParent a').click(function() { 
    var Toggle = jQuery(this).closest('ul'); 
    jQuery(this).not(Toggle).slideUp() 
    jQuery(".SubMenu").each(function(index) { 
     if(jQuery(this).hasClass("in")){ 
      jQuery(this).slideToggle(); 
      // jQuery(this).slideUp(); 
     } 
    }); 

}); 

任何幫助？很多apprciated。 JSFIDDLE DEMO

Answer 1

試試這個：

jQuery('.SubMenuParent a').click(function() { 
    var Toggle = jQuery(this).closest('li').next('ul.SubMenu'); 
    //slide up all submenu except for clicked subMenuParent 
    jQuery('ul.SubMenu').not(Toggle).slideUp(); 
    //remove 'in' class 
    jQuery('.in').removeClass('in'); 

    //toggle menu and add class 'in' 
    jQuery(Toggle).addClass('in').slideToggle(); 

}); 

DEMO