Question

我想建立一个手机响应wordpress菜单。单击后子菜单无法显示。我需要jquery的一些帮助。提前谢谢。

这是php：

  <nav id="site-navigation" class="main-navigation" role="navigation">
    <div class="menu-main-menu-container">
        <ul id="menu-main-menu" class="nav-menu">
            <li id="menu-item-12975" class="menu-item menu-item-has-children menu-item-12975"><a href="#">Context</a>
                <ul class="sub-menu">
                    <li id="menu-item-12981" class="menu-item menu-item-12981"><a href="#">a</a></li>
                    <li id="menu-item-12984" class="menu-item menu-item-12984"><a href="#">b</a></li>
                    <li id="menu-item-12985" class="menu-item menu-item-12985"><a href="#">c</a></li>
                </ul>
            </li>
            <li id="menu-item-42" class="menu-item menu-item-42"><a href="#">Next</a></li>
        </ul>
    </div>
</nav>

这是js：

(function($) {
$('.nav-menu .sub-menu').parent().on( 'click', function() {
        var $this = $( this );
        $this.attr( 'aria-pressed', function( index, value ) {
            return 'false' === value ? 'true' : 'false';
        });

        $this.toggleClass( 'activated' );
        $this.next( '.nav-menu .sub-menu' ).slideToggle( 'fast' );

    });
})(jQuery);

这是CSS：

@media (max-width: 1049px) {
    .nav-menu .sub-menu{
        display: none!important;
    }

    .nav-menu .sub-menu.activated { 
        display: block!important;
    }
}

Answer 1

要使此代码正常工作，我认为您应该将css更改为：

.activated .nav-menu.sub-menu { 
    display: block!important;
}

从您的jQuery部分代码$this将指向.sub-menu父元素。因此，activated类更改会影响父元素。

Answer 2

在点击处理程序中更改此行

$this.toggleClass( 'activated' ) 至 $this.children('.sub-menu').toggleClass( 'activated' )

由于this内部点击引用了不是.sub-menu的父级，因此未正确添加类.activated。

你的css代码中有一个拼写错误，你需要一个空格.nav-menu.sub-menu.activated所以它看起来应该是.nav-menu .sub-menu.activated。

Here是工作示例。

Answer 3

这就是你需要的东西

(function($) {
$('.nav-menu .sub-menu').prev('a').on( 'click', function(e) {
        e.preventDefault();
        var $this = $( this );
        $this.attr( 'aria-pressed', function( index, value ) {
            return 'false' === value ? 'true' : 'false';
        });

        $this.closest('li').find( '.sub-menu' ).slideToggle( 'fast' ).toggleClass( 'activated' );

    });
})(jQuery);

在css中

@media (max-width: 1049px) {
    .nav-menu .sub-menu{
        display: none!important;
    }

    .nav-menu .sub-menu.activated { 
      /*-----^------*/
       display: block!important;
    }
}

由于不适当的jquery，wordpress子菜单无法切换

3 个答案: