Question

我正在创建像手风琴效果一样的垂直导航菜单。

点击＆＃34; nav-list - item a＆＃34;，它必须添加类名＆＃34;选择＆＃34;到＆＃34; h5＆＃34;并且滑开以打开子菜单。
除选定的菜单外，所有其他子菜单或已打开的子菜单都必须滑动。

请让我知道如何解决这个问题。以下是我使用的代码。

感谢您的帮助。

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');
  }
});

Jquery下拉 - 手风琴

1 个答案: