Выпадающее JQuery - аккордеон

0

Я создаю меню вертикальной навигации, как эффект аккордеона.

  1. Нажав на «nav-list - item 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();
  }
});
    
задан TDG 26.05.2016 в 04:04
источник

1 ответ

0
$('.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');
  }
});
    
ответ дан TDG 26.05.2016 в 05:19