Question

我在Wordpress Genesis网站中使用带有切换按钮的响应式JavaScript菜单。

该页面有一个主要CSS菜单（.nav-primary）和一个辅助CSS菜单（.nav-secondary）。主要导航样式类为.genesis-nav-menu和.sub-menu。

问题是响应式菜单应用于网站上的每个导航元素，即您至少有2个toogle栏。我只想将它用于主菜单（.nav-primary）。

我已经尝试用'.nav-primary替换'nav'，这似乎有效，但它会使'secondary-menu'和所有其他导航元素消失。

我很感激你的建议如何完成。

Javascript：

( function( window, $, undefined ) {
    'use strict';

    $( 'nav' ).before( '<button class="menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to menus
    $( 'nav .sub-menu' ).before( '<button class="sub-menu-toggle" role="button" aria-pressed="false"></button>' ); // Add toggles to sub menus

    // Show/hide the navigation
    $( '.menu-toggle, .sub-menu-toggle' ).on( 'click', function() {
        var $this = $( this );
        $this.attr( 'aria-pressed', function( index, value ) {
            return 'false' === value ? 'true' : 'false';
        });

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

    });

})( this, jQuery );

Answer 1

您需要将$(".nav-primary")选择器用于nav-primary类，而不是$("nav-primary")。

您可以在此处获得有关jQuery selectors的信息。

如何有条件地在特定的CSS类上应用Javascript？

1 个答案: