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' );
        $this.next( '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..

    How to add delay in css hover on a div that was displayed none?

    CSS How to Properly use ems instead of pixels?

    How to achieve a CSS footer “curtain” effect?

    Show some characters above a picture on hover

    How to Center Rotated text with CSS

    How to make the same distance between tags with only CSS?

    How to get a tight div when heights differ? [duplicate]

    How to solve this layout design-error due to conflicting css?

    How can I find out what CSS is needed to implement twitter Bootstraps Modal. [closed]

    How to place the same image at the top and at the bottom of the same column?

    How can i place a child div on a fixed position of a parent div that when i change place of parent then child should move automatically?

    How to vertical-align text on this input box for IE

    How to center image which is bigger than screen?

    How to place a footer at the bottom of a page in CSS?

    How to select the first type of child of a particular CSS using CSS selector [duplicate]

    How to make a responsive mosaic css fullscreen width

    How to create a box when mouse over text in pure CSS?

    How do you get a css box to extend the entire width of the browser window?

    How to take an element over to given padding with CSS

    CSS - How to remove comments and make CSS one line

    How to change active tab to first css

    How to enlarge a div without moving other elements

    How do I get started with jQuery? [closed]

    How to apply a CSS class on hover to dynamically generated submit buttons?

    How do I make the .left class appear below the header but keep the header position as fixed?

    How to properly make my own list-style?

    How to prevent css missing when exporting some html to excel file?

    Problems with properly simulate a border to a “ribbon” with css. How do I correct it?

    CSS - How to working with multi-level menu by simple

    How can I center an image with text that follows it using CSS?