Невозможно настроить дочерние элементы

Question

Я пытаюсь создать простую слайд-меню при нажатии на элемент меню верхнего уровня. Функциональность, которую я ищу, - это когда элемент меню верхнего уровня нажимается на все другие подменю, а тот, который нажал слайды, и когда вы нажимаете тот же пункт меню, подменю соскальзывает.

Проблема у меня нацеливает ребенка уль теги

<ul> 
    <li class="main-menu-item"> 
    <a href="#"></a> 
    <ul class="sub-menu"> 
     <li>Stuff</li> 
    </ul> 
    </li> 
</ul> 

Вот мой JQuery

(function($) { 
    'use strict'; 
    $(function() { 

     var menuItem = $('#nav__menu li.main-menu-item'), 
       subMenuItem = $('#nav__menu ul.sub-menu'); 
     // setup 
     menuItem.parents().attr('tabIndex',-1).attr('aria-haspopup',true); 
     subMenuItem.attr('aria-hidden', true); 

     menuItem.on('click', function(e) { 
      e.preventDefault(); 
      $(this).toggleClass('active'); 
      $(this).siblings('.active').removeClass('active'); 
     }); 
     subMenuItem.each(function() { 
      if($(this).parents().hasClass('active')) { 
      $(this).find(subMenuItem).attr('aria-hidden', false).slideDown(); 
     } else { 
      $(this).find(subMenuItem).attr('aria-hidden', true).slideup(); 
     } 
     }); 
    }); 
})(jQuery); 

JS Fiddle

Answer 1

Код подменю должно быть внутри функции щелчку menuItem, иначе он будет выполняться только один раз при загрузке страницы. У вас также есть две функции DOM ready, и вы выбираете вещи более одного раза.

Вам не нужно определять подменю для загрузки, а затем перебирать все, что ищет, у которого есть активный родитель. Вы используете children() или find().

https://jsfiddle.net/Lt34k1n3/2/

(function($) { 
    'use strict'; 
    $('#nav__menu li.main-menu-item') // select this once 
     .attr('tabIndex',-1).attr('aria-haspopup',true) // apply attributes 
     .find('ul.sub-menu') // find the child dropdown 
      .attr('aria-hidden', true) // set attrs on that 
      .slideUp() // and slide up 
     .end() // go back up to #nav__menu li.main-menu-item 
     .on('click', function(e) { 
      e.preventDefault(); 
      $(this) 
       .addClass('active') // remove active class 
       .find('ul.sub-menu') // find child dd 
        .attr('aria-hidden', false) 
        .slideDown() // set attrs 
       .end() // back up to $(this) which is still #nav__menu li.main-menu-item 
       .siblings() // select its siblings 
        .removeClass('active') 
        .find('ul.sub-menu') // find these to close them 
         .attr('aria-hidden', true) 
         .slideUp() 
     }); 

})(jQuery); 

Если вы хотите, чтобы переключить щелкнул элемент, можно использовать slideToggle и toggleClass, а не slideDown и addClass, и вам нужно будет создать логическое для атрибута арии-скрытый, которые вы можете сделайте, инвертируя результат для $(this).closest('ul.sub-menu').hasClass('active'), что означает, что «у предка» «ul.sub-menu» имеет класс «active»? »

 $(this) 
      .toggleClass('active') 
      .find('ul.sub-menu') 
       .attr('aria-hidden', !$(this).closest('ul.sub-menu').hasClass('active')) 
       .slideToggle() 
      .end() 

Answer 2

Я нашел довольно простой пример, который работает на меня.

(function($) { 
    'use strict'; 
    var $menuItem = $('#nav__menu li.menu-item-has-children'), 
     $subMenuItem = $('#nav__menu ul.sub-menu'); 
    // setup 
    $menuItem.addClass('closed').attr('tabIndex',-1).attr('aria-haspopup',true); 
    $subMenuItem.attr('aria-hidden', true); 
    $($menuItem).on('click', function() { 
     $(this).siblings('li').removeClass('open').addClass('closed').children('ul').hide(); 
     if($(this).hasClass('closed')){ 
      $(this).removeClass('closed').addClass('open'); 
      $(this).children('ul').slideDown(); 
     } else if($(this).hasClass('open')){ 
      $(this).removeClass('open').addClass('closed'); 
      $(this).children('ul').slideUp(); 
     } 
    }) 
})(jQuery); 

Я надеюсь, что это может помочь кому-то еще