[英]How to apply Javascript conditionally on a specific css-class only?
I am using a responsive JavaScript menu with a toggle button in a Wordpress Genesis site. 我在Wordpress Genesis网站中使用带有切换按钮的响应式JavaScript菜单。
The page has a primary CSS menu ( .nav-primary
) and a secondary CSS menu ( .nav-secondary
). 该页面具有一个主CSS菜单(
.nav-primary
)和一个辅助CSS菜单( .nav-secondary
)。 The main navigation styling classes are .genesis-nav-menu
and .sub-menu
. 主要的导航样式类是
.genesis-nav-menu
和.sub-menu
。
The problem is that the responsive menu is applied to every navigation element on the site, ie you have at least 2 toogle bars. 问题在于响应式菜单已应用于站点上的每个导航元素,即您至少有2个探棒。 I would like to use it only for the primary menu (
.nav-primary
). 我只想将其用于主菜单(
.nav-primary
)。
I already tried to substitute 'nav' with .nav-primary
, which seems to work, however it makes the ´secondary-menu´ and all other navigation elements disappear. 我已经尝试用
.nav-primary
代替'nav',这似乎可行,但是它使“ secondary-menu”和所有其他导航元素消失了。
I would appreciate your advice how to get this done. 非常感谢您的建议如何完成这项工作。
The Javascript: 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 );
You need to use $(".nav-primary")
selector for the class nav-primary, not $("nav-primary")
. 您需要对类nav-primary使用
$(".nav-primary")
选择器,而不是$("nav-primary")
。
Here you have information about jQuery selectors . 在这里,您可以获得有关jQuery选择器的信息。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.