How to apply Javascript conditionally on a specific css-class only?

Tags: javascript,css,wordpress

Problem :

I am using a responsive JavaScript menu with a toggle button in a Wordpress Genesis site.

The page has a primary CSS menu (.nav-primary) and a secondary CSS menu (.nav-secondary). The main navigation styling classes are .genesis-nav-menu and .sub-menu.

The problem is that the responsive menu is applied to every navigation element on the site, i.e. you have at least 2 toogle bars. I would like to use it only for the primary menu (.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.

I would appreciate your advice how to get this done.

The 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' );
        $ 'nav, .sub-menu' ).slideToggle( 'fast' );


})( this, jQuery );

Solution :

You need to use $(".nav-primary") selector for the class nav-primary, not $("nav-primary").

Here you have information about jQuery selectors.

    CSS Howto..

    jQuery .css, how to translate it into Javascript

    How to Align CSS form

    How can a URL fragment affect a CSS layout?

    How to layout follow content using CSS?

    How can I pipe the output from gulp-w3c-css to the console

    How to define an elements style using CSS to be on top of an other? Why in my case z-index isn't effective?

    How to remove top / bottom margin from isotope masonry

    How to do a full bleed background image that scales with resolution in css/javascript? [duplicate]

    How to create a fluidic list using css

    How to reuse CSS selector?

    How can I position this drupal block?

    How to Access A To String Function with PHP?

    how to disable one header among of multiple headers in jQuery table sorter

    How can i make each div look like seperate block?

    How to align elements so CSS fixed doesnt overlap on page load

    how to align divs vertically in html and css?

    CSS how to align vertically center div floating elements of menu?

    How to arrange two butons side by side in Struts2

    How to Change CSS of Custom Template JointJS Element?

    How to create push button?

    How do I apply a CSS to a clutter stage?

    How can I make my jquery mobile collapsible set larger using css

    how can resize the page? [closed]

    How to reuse footer with only HTML/CSS?

    When I click on each button its shows me the same content of the first button

    How to change styling of a specific div onhover of another element when divs share an id

    How to use vertical menus in HTML and css?

    how do responsive recaptcha images

    using css, how to position image so when resizing window, image will not move

    CSS delivery optimization: How to defer css loading?