dropdown menu on click with jquery

Question

I've been working with this thread. But I don't have the rep to ask them the question.

I have this setup in a Wordpress install using the default menu hierarchy that Wordpress spits out, like this:

HTML:

<div class="menu-featured-categories-container">
<ul id="menu-featured-categories">
    <li class="menu-item-has-children">
      <a href="#">Featured Categories</a>
        <ul class="sub-menu">
            <li>...</li>
            <li>...</li>
            <li>...</li>
        </ul>
    </li>
</ul>
</div>

CSS:

#menu-featured-categories ul.sub-menu {
    display: none;
}

#menu-featured-categories ul.visible {
    display: block;
}

jQuery:

$(document).ready(function() {
    $('.menu-item-has-children').click(function() {
        $('.sub-menu').toggleClass('visible');
    });
});

It's just not working for me. So my question is: What am I doing wrong? Any thoughts would be greatly appreciated. Thanks.

Just a thought - have you tried using .on('click', function() { ... }); instead? I know .click() can have issues with dynamically inserted elements, although that may not be the issue you're seeing. — joshfarrant
– joshfarrant, Commented Oct 13, 2015 at 21:17
Thanks. Mohammed Alsaedi answer worked. Apparently has something to do with how Wordpress processes jQuery. See below. — KL Piazza
– KL Piazza, Commented Oct 14, 2015 at 13:31

Mo Alsaedi · Accepted Answer · 2015-10-13 21:25:59Z

2

In many cases, you need to use noConflict mode to write your jQuery in Wordpress. Alternatively, you can use 'jQuery' instead of $ in all instances.

So here are your options, either replace the wrapping

$(document).ready(function(){
});

with

jQuery( document ).ready(function( $ ) {
  // Code that uses jQuery's $ can follow here.
});

Your second option is to rewrite your code as follows:

jQuery(document).ready(function() {
    jQuery('.menu-item-has-children').click(function() {
        jQuery('.sub-menu').toggleClass('visible');
    });
});

Either of these should resolve your issue, considering that the code works, which it seemingly does based on Zakaria's Fiddle in the comments.

Cheers!

answered Oct 13, 2015 at 21:25

Mo Alsaedi

7073 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

KL Piazza Over a year ago

Amazing. Worked perfectly. Thank you.

Collectives™ on Stack Overflow

dropdown menu on click with jquery

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related