I have a left hand menu that has a flyout submenu on hover. On tablet / mobile I have the menu collapsing with a toggle button. This all works fine.
The problem is the click event does not work on the menu items that have a submenu. I need to show / hide the submenus on click on mobile. So nothing happens when Item 1 is clicked but item 2 works and the submenu links work. Could it be the ones with links work and the ones with # don't?
$(function() {
//behaviours depending on screensize
function checkScreenSize() {
var width = $(window).width();
/*MOBILE*/
if (width < 991.98) {
$('#primary-menu li').click(function() {
console.log('test 1');
$(this).children('.sub-menu').slideToggle();
});
//does not work
$('#primary-menu > li').on('click', function() {
console.log('test 2');
$(this).children('.sub-menu').slideToggle();
});
//does not work
//show submenu
$('#primary-menu li').on('click', function() {
console.log('test 3');
var submenu = $(this).children('.sub-menu');
$(submenu).show();
});
//does not work
$('#primary-menu li > .sub-menu').parent().click(function() {
console.log('test 4');
var submenu = $(this).children('.sub-menu');
var current = $(this).hasClass("current-menu-item");
$(submenu).show();
});
//this works
} else {
/*DESKTOP*/
// ....this all works....
}
checkScreenSize();
$(window).resize(checkScreenSize);
});.sub-menu {display:none}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="primary-menu" class="menu nav-menu">
<li id="menu-item-4793" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4793">
<a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="/wp-content/uploads/2021/12/copie.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Item 1</span></a>
<ul class="sub-menu" style="display: table;">
<li id="menu-item-4908" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4908">
<a href="/subitem1/">SUBItem1</a>
</li>
<li id="menu-item-4892" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4892">
<a href="/subitem2/">SUBItem2</a>
</li>
</ul>
</li>
<li id="menu-item-4794" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-4794">
<a href="/item2/" aria-current="page" class="menu-image-title-after menu-image-not-hovered">
<img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1.svg" class="menu-image menu-image-title-after" alt="" loading="lazy">
<span class="menu-image-title-after menu-image-title">Item 2</span>
</a>
</li>
</ul>Consider the following.
$(function() {
function mobileInit() {
$('li.menu-item').off("click").click(function(e) {
if ($(this).parent("ul").is("#primary-menu")) {
e.preventDefault();
console.log("Click Event on Top Level");
$(".sub-menu", this).toggle();
return false;
} else {
console.log("Click Event on Sub Level");
e.stopPropagation();
return false;
}
});
}
function desktopInit() {}
//behaviours depending on screensize
function checkScreenSize() {
if ($(window).width() < 991.98) {
console.log("Mobile");
mobileInit();
} else {
console.log("Desktop");
desktopInit();
}
}
checkScreenSize();
$(window).resize(checkScreenSize);
});.sub-menu {
display: none
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="primary-menu" class="menu nav-menu">
<li id="menu-item-4793" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4793">
<a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="/wp-content/uploads/2021/12/copie.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Item 1</span></a>
<ul class="sub-menu">
<li id="menu-item-4908" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4908">
<a href="/subitem1/">SUBItem1</a>
</li>
<li id="menu-item-4892" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4892">
<a href="/subitem2/">SUBItem2</a>
</li>
</ul>
</li>
<li id="menu-item-4794" class="menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-4794">
<a href="/item2/" aria-current="page" class="menu-image-title-after menu-image-not-hovered">
<img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1.svg" class="menu-image menu-image-title-after" alt="" loading="lazy">
<span class="menu-image-title-after menu-image-title">Item 2</span>
</a>
</li>
</ul>This assumes the User will click on all the menu-item elements and we want to do different things depending on their location in the hierarchy.
The stopPropagation() method of the Event interface prevents further propagation of the current event in the capturing and bubbling phases. It does not, however, prevent any default behaviors from occurring; for instance, clicks on links are still processed. If you want to stop those behaviors, see the preventDefault() method. It also does not prevent immediate propagation to other event-handlers. If you want to stop those, see stopImmediatePropagation().
Update
You had a Style, display: table on your element. Removing this allows CSS to Show and Hide it as needed. Switching to .toggle() will do this.
Maybe you should try event delegation method, for example something like this;
$('#primary-menu).on('click', '.submenu > .menu-item', function (e) {
// avoid the event to propagate and avoid running the other event listeners added to parent element(s)
e.stopPropagation();
// do the stuff you want to do with sub menus
var submenu = $(this).children('.sub-menu');
$(submenu).show();
})
$('#primary-menu).on('click', '.menu-item.menu-item-has-children', function (e) {
// avoid the event to propagate and avoid running the other event listeners added to child element(s)
e.stopPropagation();
// do the stuff you want to do with menu items that has sub menus
$(this).children('.sub-menu').slideToggle();
})
Can't you just add two class to target directly your <li> (or work with your ids) ?
I just add class menu-item-toggler to the first item and menu-item-redirect the the second one.
Then I work with these classes.
I don't know if this is what you are looking for
$(function() {
function mobileInit() {
$('.menu-item-toggler').click(e => {
e.preventDefault();
console.log("Click Event on Top Level");
$('.menu-item-toggler>.sub-menu').toggle();
return false;
})
$('.menu-item-redirect').click(e => {
console.log("Click Event on Sub Level");
e.stopPropagation();
return false;
})
};
function desktopInit() {}
//behaviours depending on screensize
function checkScreenSize() {
if ($(window).width() < 991.98) {
console.log("Mobile");
mobileInit();
} else {
console.log("Desktop");
desktopInit();
}
}
checkScreenSize();
$(window).resize(checkScreenSize);
});.sub-menu {
display: none
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="primary-menu" class="menu nav-menu">
<li id="menu-item-4793" class="menu-item-toggler menu-item menu-item-type-custom menu-item-object-custom menu-item-has-children menu-item-4793">
<a href="#" class="menu-image-title-after menu-image-not-hovered"><img width="1" height="1" src="/wp-content/uploads/2021/12/copie.svg" class="menu-image menu-image-title-after" alt="" loading="lazy"><span class="menu-image-title-after menu-image-title">Item 1</span></a>
<ul class="sub-menu">
<li id="menu-item-4908" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4908">
<a href="/subitem1/">SUBItem1</a>
</li>
<li id="menu-item-4892" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4892">
<a href="/subitem2/">SUBItem2</a>
</li>
</ul>
</li>
<li id="menu-item-4794" class="menu-item-redirect menu-item menu-item-type-custom menu-item-object-custom current-menu-item menu-item-4794">
<a href="/item2/" aria-current="page" class="menu-image-title-after menu-image-not-hovered">
<img width="1" height="1" src="https://staging.heuristic-hypatia.91-134-228-53.plesk.page/wp-content/uploads/2021/12/Plan-de-travail-1.svg" class="menu-image menu-image-title-after" alt="" loading="lazy">
<span class="menu-image-title-after menu-image-title">Item 2</span>
</a>
</li>
</ul>*I worked with Twisty's code