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.

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.

• javascript
• jquery
• html
• css
• wordpress

Share Improve this question Follow edited May 23, 2017 at 11:58 CommunityBot 111 silver badge asked Oct 13, 2015 at 21:14 KL PiazzaKL Piazza 2311 gold badge11 silver badge44 bronze badges 3

• 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 Commented Oct 13, 2015 at 21:17
• 1 Your code work fiine see the Fiddle. – Zakaria Acharki 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 Commented Oct 14, 2015 at 13:31

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 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 ments.

Cheers!