Jack1991 Jack1991 - 1 year ago 66
Javascript Question

How to make JQuery select individual submenus?

The Wordpress theme I'm building has a mobile navigation menu, and I've set it up so that a span button appears to the right hand side of every menu item that has children / subpages, as a means of allowing me to open and close the submenus. The only problem is that when I click one of the buttons, all of the submenus open instead of just the one I've clicked. Is there a way of setting the jQuery to single out the individual submenu I'm trying to open?

My jQuery is as follows – I have two scripts, the first one to create the span classes and the second is to make them open the submenus when clicked.

Script 1:

jQuery(document).ready(function($) {

$('nav.main-menu#mobile ul li:not(.hide-mobile) ul').parent('li').after('<span class="submenu-button">+</span>');


Script 2:

jQuery(document).ready(function($) {

$('.submenu-button').click(function() {
$('nav.main-menu#mobile ul ul').toggleClass('open');


UPDATE –––––––––––––––––––––––––––––––––––––––––

My Header:

Please note – I've created the menu below via PHP in the Wordpress menus section, so none of my links are hard-coded. Therefore I'd prefer a way of doing this that doesn't involve menu item IDs

<div class="mobile-menu">
<span class="menu-button-close"></span>
<nav class="main-menu" id="mobile">
<h6 id="mobile-menu-heading">MENU</h6>
<div class="menu-header-menu-container">
<ul id="menu-header-menu-1" class="menu">
<li class="hide-desktop menu-item menu-item-type-post_type menu-item-object-page menu-item-1386"><a href="http://www.lucieaverillphotography.co.uk/">Home</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-463">
<a href="http://www.lucieaverillphotography.co.uk/work/">Work</a>
<ul class="sub-menu">
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-584"><a href="http://www.lucieaverillphotography.co.uk/work/landscapes/">Landscapes</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-473"><a href="http://www.lucieaverillphotography.co.uk/work/seascapes/">Seascapes</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-478"><a href="http://www.lucieaverillphotography.co.uk/work/macro/">Macro</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-477"><a href="http://www.lucieaverillphotography.co.uk/work/cities/">Cities</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-475"><a href="http://www.lucieaverillphotography.co.uk/work/long-exposure/">Long Exposure</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-480"><a href="http://www.lucieaverillphotography.co.uk/work/miscellaneous/">Miscellaneous</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-2 current_page_item menu-item-10"><a href="http://www.lucieaverillphotography.co.uk/about/">About</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-464"><a href="http://www.lucieaverillphotography.co.uk/shop/">Shop</a></li>
<li class="hide-mobile menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-923">
<ul class="sub-menu">
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-11"><a target="_blank" href="http://facebook.com/">Facebook</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-924"><a href="https://www.instagram.com/lucie_averill">Instagram</a></li>
<li class="menu-item menu-item-type-custom menu-item-object-custom menu-item-15"><a target="_blank" href="https://www.flickr.com/photos/lucie-averill/">Flickr</a></li>
<li class="menu-item menu-item-type-post_type menu-item-object-page menu-item-14"><a href="http://www.lucieaverillphotography.co.uk/contact/">Contact</a></li>


function register_menus() {



'primary' => esc_html__( 'Primary Menu', 'theme_wp' ),
'header' => __( 'Header Menu' ),
'footer' => __( 'Footer Menu' )

add_action( 'init', 'register_menus' );

Answer Source

This happens because $('nav.main-menu#mobile ul ul').toggleClass('open'); is targeting all occurrences of nav.main-menu#mobile ul ul and applying the open class. To solve this issue, you'll have to use this within the event handler. Something similar to as follows...

$('.submenu-button').click(function() {

This will target the specific element that is clicked, and move up to its parent element, applying the class directly for this. It would have to be tweaked to your HTML, but the general idea should follow through.


For visualization, here's a JSFiddle using the exact HTML. https://jsfiddle.net/8nj5y4t1/4/

Due to the nature of your HTML, you would have to target it as...

$('.submenu-button').click(function() {

This will allow it to lock on to the li, and not the ul which contains all the expandable list items.