JQuery аккордеон сворачивания братьев

Question

Я написал простое меню аккордеон с JQuery сам по следующей HTML структуры:

<ul class="menu"> 
    <li><a href="#">menu1</a></li> 
    <li class="expanded"> 
     <a href="#">menu2</a> 
     <ul class="menu"> 
      <li><a href="#">menu 2.1</a></li> 
      <li><a href="#">menu 2.2</a></li> 
      <li><a href="#">menu 2.3</a></li> 
     </ul> 

    </li> 
    <li><a href="#">menu3</a></li> 
    <li class="expanded"> 
     <a href="#">menu4</a> 
     <ul class="menu"> 
      <li><a href="#">menu 4.1</a></li> 
      <li><a href="#">menu 4.2</a></li> 
     </ul>    
    </li> 
    <li class="expanded"> 
     <a href="#">menu5</a> 
     <ul class="menu"> 
      <li><a href="#">menu 5.1</a></li> 
      <li><a href="#">menu 5.2</a></li> 
     </ul>    
    </li> 

</ul> 

JQuery:

$(function(){ 

    $('li.expanded > ul').hide(); 
    $('li.expanded > a').click(function(){ 

    $(this).next().slideToggle(); 

    }); 
}); 

Теперь, когда я нажимаю в меню2 он открывается, как ожидалось, когда я нажимаю на следующее меню4, мне нужно, чтобы меню2 и остальная часть всего открытого меню автоматически закрывали его или сворачивали. Интересно, как этого добиться.

Answer 1

Попробуйте так:

$(function(){ 

     $('li.expanded > ul').hide(); 
     $('li.expanded > a').click(function(){ 

     $('li.expanded > ul').not(':hidden').slideToggle(); 
     $(this).next().slideToggle(); 


     }); 
    }); 

Answer 2

Попробуйте

fiddle Demo

$('li.expanded > ul').not($(this).next()).hide(); //instead of .hide() you can use .slideDown() 

---

$(function() { 
    $('li.expanded > ul').hide(); 
    $('li.expanded > a').click(function() { 
     $('li.expanded > ul').not($(this).next()).hide(); //added here 
     $(this).next().stop(true, true).slideToggle(); 
    }); 
}); 

Answer 3

Попробуйте это:

$(function(){ 

    $('li.expanded > ul').hide(); 
    $('li.expanded > a').click(function(){ 
    $('li.expanded > a').next().slideUp(); 
    $(this).next().slideToggle(); 

    }); 
}); 

Answer 4

Попробуйте

$(function() { 
    var $subs = $('li.expanded > ul').hide(); 
    $('li.expanded > a').click(function() { 
     var $ub = $(this).next().stop(true, true).slideToggle(); 
     $subs.not($ub).hide(); 
    }); 
}); 

Демо: Fiddle