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>Considera lo siguiente.
$(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> Esto supone que el usuario hará clic en todos los elementos del menu-item y queremos hacer cosas diferentes según su ubicación en la jerarquía.
El método stopPropagation() de la interfaz de eventos evita que el evento actual se siga propagando en las fases de captura y burbujeo. Sin embargo, no evita que se produzca ningún comportamiento predeterminado; por ejemplo, los clics en enlaces aún se procesan. Si desea detener esos comportamientos, consulte el método preventDefault() . Tampoco evita la propagación inmediata a otros controladores de eventos. Si desea detenerlos, consulte stopImmediatePropagation() .
Actualizar
Tenías una display: table en tu elemento. Eliminar esto permite que CSS lo muestre y lo oculte según sea necesario. Cambiar a .toggle() hará esto.
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