Tengo un menú deslizante con submenús. Estoy tratando de ocultar un elemento en la fila de navegación cuando un usuario hace clic en uno de los elementos del menú principal que tiene un submenú (hace clic en la flecha de expansión) + Quiero mostrar el elemento oculto cuando los usuarios vuelven a hacer clic en el menú de nivel superior. El elemento <ul> de mi menú es una clase de slide-menu-is-active-parent cuando cualquiera de los submenús está abierto.
Esta es una versión simple de mi fila html:
<div class="navigation row"> <nav> <ul id="nav-menu"> <li>Menu item 1</li> <span class="submenu-button"> <ul class="sub-menu"> <li>Sub-menu item 1</li> <li>Sub-menu item 2</li> <li>Sub-menu item 3</li> </ul> </li> <li>Menu item 2</li> <span class="submenu-button"> <ul class="sub-menu"> <li>Sub-menu item 1</li> <li>Sub-menu item 2</li> <li>Sub-menu item 3</li> </ul> </li> </ul> </nav> </div> <div class="content-row"> [whatever content...] </div> Intenté el siguiente script para agregar una clase desde menu-open al elemento some-content cuando se cumplen ambas condiciones: el usuario hace clic en el botón del submenú y cuando el elemento <ul id="nav-menu"> obtiene el slide-menu-is-active-parent class cuando se abre. Y con la clase agregada a mi fila de contenido, podría usar simple .content-row.menu-open{display:none} para ocultarla.
function($) { $("#nav-menu .submenu-button").click(function(){ if ($('#nav-menu').hasClass('slide-menu-is-active-parent')) { $('.content-row').addClass('menu-open'); } else { $('.content-row').removeClass('menu-open'); } }); });Pero eso no funciona. ¿Algún consejo sobre dónde falta mi script?
Para ser honesto, su código funciona: simplemente agregue la clase slide-menu-is-active-parent al #nav-menu y la content-row aparecerá al hacer clic. Aún así, haría esto de manera diferente, incluso si usara jQuery . Aquí hay una solución simplista:
jQuery(document).ready(function($) { // this click handler opens the sub-menu $(".menu-item").on('click', function() { $(this).find(".sub-menu").toggle() }) // this click handler toggles the content-row $(".sub-menu > li").on('click', function(e) { // stopPropagation prevents the click event // to bubble up to the menu-item parent e.stopPropagation() $(".content-row").toggle() }) }) .d-none { display: none; } .menu-item, .sub-menu>li { cursor: pointer; } .content-row {} <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="navigation row"> <nav> <ul id="nav-menu"> <li class="menu-item">Menu item 1 <ul class="sub-menu d-none"> <li>Sub-menu item 1</li> <li>Sub-menu item 2</li> <li>Sub-menu item 3</li> </ul> </li> <li class="menu-item">Menu item 2 <ul class="sub-menu d-none"> <li>Sub-menu item 1</li> <li>Sub-menu item 2</li> <li>Sub-menu item 3</li> </ul> </li> </ul> </nav> </div> <div class="content-row d-none"> [whatever content...] </div>Debe usar $(this) para hacer referencia al elemento en el que hizo clic.
También necesita encontrar padre con clase, para que pueda usar padres () con el nombre de su clase.
NOTA: si resolví su problema, la próxima vez haga un esfuerzo para aclarar su pregunta, será mejor para todos :)
$("#nav-menu .submenu-button").click(function(){ if ($(this).parents('#nav-menu').hasClass('slide-menu-is-active-parent')) { $('.content-row').addClass('menu-open'); } else { $('.content-row').removeClass('menu-open'); } }); .content-row { display:none } .menu-open { display:block } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="navigation row"> <nav> <ul id="nav-menu" class="slide-menu-is-active-parent"> <li>Menu item 1</li> <span class="submenu-button">Button</span> <ul class="sub-menu"> <li>Sub-menu item 1</li> <li>Sub-menu item 2</li> <li>Sub-menu item 3</li> </ul> <li>Menu item 2</li> <span class="submenu-button">Button</span> <ul class="sub-menu"> <li>Sub-menu item 1</li> <li>Sub-menu item 2</li> <li>Sub-menu item 3</li> </ul> </ul> </nav> </div> <div class="content-row"> [whatever content...] </div>