Tengo un menú a la izquierda que tiene un submenú flotante al pasar el mouse. En tableta/móvil tengo el menú colapsado con un botón de alternancia. Todo esto funciona bien.
El problema es que el evento de clic no funciona en los elementos del menú que tienen un submenú. Necesito mostrar/ocultar los submenús al hacer clic en el móvil. Entonces, no sucede nada cuando se hace clic en el elemento 1, pero el elemento 2 funciona y los enlaces del submenú funcionan. ¿Podrían ser los que tienen enlaces funcionan y los que tienen # no?
$(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>Tal vez debería probar el método de delegación de eventos, por ejemplo, algo como esto;
$('#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(); })¿No puede simplemente agregar dos clases para apuntar directamente a su <li> (o trabajar con sus ID)? Solo agrego class menu-item-toggler al primer elemento y menu-item-redirect al segundo. Entonces trabajo con estas clases.
no se si esto es lo que buscas
$(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>*Trabajé con el código de Twisty