jQuery 下拉菜单 - 手风琴

Question

>我正在创建垂直导航菜单，如手风琴效果。

1. 单击任一"导航列表--项a"，它必须将类名"selected"添加到"h5"并向下滑动以打开子菜单。
2. 除所选菜单外，所有其他子菜单或已打开的子菜单都必须向上滑动。

如何解决此问题？下面是我使用的代码。

.HTML

<div class="nav-list--item">
  <h5><a href="javascript:void(0);" title=""><img src="images/svg/ts.svg" alt="" /><span>Item1</span></a></h5>
  <ul>
    <li><a href="" title="">Calendar1</a></li>
    <li><a href="" title="">Calendar2</a></li>
  </ul>
</div>
<div class="nav-list--item">
  <h5><a href="javascript:void(0);" title=""><img src="images/svg/ts.svg" alt="" /><span>Item2</span></a></h5>
  <ul>
    <li><a href="" title="">Calendar3</a></li>
    <li><a href="" title="">Calendar4</a></li>
  </ul>
</div>

.JS

$('.nav-list--item').on('click', function(){
  $('.nav-list--item h5.selected').removeClass('selected');
  $('.nav-list--item ul.selected').removeClass('selected');
  $(this).find('h5').addClass('selected');
  $(this).find('ul').addClass('selected');
  if ($('.nav-list--item ul').hasClass('selected')){
    $('ul',this).slideDown();
  }
  else{
    $('ul', this).slideUp();
  }
});

Answer 1

$('.nav-list--item').on('click', function(){
  $('.nav-list--item h5.selected').removeClass('selected');
  $('.nav-list--item ul.selected').removeClass('selected');
  $(this).find('h5').addClass('selected');
  $(this).find('ul').addClass('selected');
  if ($('ul.submenu--item').is(':visible')) {
    $('ul.submenu--item').slideUp('slow');
  }
  if ($('> ul.submenu--item',this).length > 0) {
    $('> ul.submenu--item',this).stop().slideDown('slow');
  }
});