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代码的click函数内，否则它只会在页面加载时执行一次。您还有两个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')的结果来做，这意味着＆＃39;做祖先＆＃34; ul.sub-menu＆＃34;让课程＆＃34;活跃＆＃34;？＆＃39;

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

我希望这可以帮助别人

无法定位子元素

2 个答案: