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.

Answer 1

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!