不能以子元素为目标

Question

当顶层菜单项被单击时，我正在尝试制作一个简单的向下滑动菜单。我正在寻找的功能是，当一个顶层菜单项被单击时，所有其他的子菜单都向上滑动，而被单击的子菜单向下滑动，当您单击相同的菜单项时，子菜单项向上滑动。

我遇到的问题是将子ul标记作为目标

<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的函数，并且不止一次选择对象。

您不需要在加载时定义子菜单项，然后遍历所有子菜单项，查找具有活动父项的子菜单项。为此，您可以使用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，并且您需要为aria-hidden属性创建布尔值，您可以通过颠倒$(this).closest('ul.sub-menu').hasClass('active')的结果来实现这一点，这意味着“祖先"ul.sub-menu”是否具有“活动”类？“

        $(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 );

我希望这能帮助其他人。