1

Hace unos días pedí ayuda con un menú desplegable que estoy haciendo que muestra sus submenús por medio de clicks en lugar de usar hover.

La anterior pregunta que hice me la contestaron, pero me surgió un nuevo problema y como no tengo casi conocimiento en javascript y jquery se me esta dificultando un poco.

Lo que quiero es que al hacer click en la opcion que dice "Hola" que pongo en mi ejemplo el menú se cierre, para que no quede el desplegado después de hacer click en el enlace.

No estaba seguro si crear un nuevo post para hacer esta nueva pregunta o editar este mismo, hice lo segundo, ojala alguien pueda ayudarme se lo voy a agradecer muchisimo.

 var menu = $('.dropdown li a')    

    $('.dropdown li a').on("click", function(e) {
      e.stopPropagation();
      let current = $(this).next('ul');
      $(this).closest('ul').find('ul').each((index, item) => {
        if($(item)[0] != $(current)[0]) {
          $(item).hide();
        }
      });

      current.toggle(); 
    });

    $(document).on("click", function(e){
      if(!menu.is(e.target) && !menu.has(e.target).length){
        menu.next('ul').hide();
      }
    });
*{margin:0; padding:0; outline:0; box-sizing:border-box;}
    .dropdown{background:#333; display:block; height:28px;}
    .dropdown li{position:relative; float:left; list-style:none; white-space:nowrap; background:#34353a;}
    .dropdown li a{display:block; height:28px; line-height:28px; padding:0 8px; text-decoration:none; color:#ccc;}
    .dropdown ul{position:absolute; display:none;}
    .dropdown li ul ul{left:100%; top:0;}
    .dropdown li ul li{float:none;}
    .dropdown img{margin-right:5px; position:relative; top:2px;}
    .dropdown li:hover{background:#2e4e89;}    
    .dropdown li a:hover{color:#eee;} 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="dropdown">
    <li><a href="#">Menu 1</a>
      <ul>
        <li><a href="#">Opcion 1 ></a>
          <ul>
            <li><a href="#">Opcion 4</a></li>
            <li><a href="#">Opcion 5 ></a>
              <ul>
                <li><a href="#">Opcion 7</a></li>
              </ul>
            </li>
            <li><a href="#">Opcion 6 ></a>
              <ul>
                <li><a href="#">Opcion 8</a></li>
              </ul>
            </li>
          </ul>
        </li>        
        <li><a href="#">Opcion 2</a></li>
        <li><a href="#hola">Hola</a></li>
      </ul>
    </li>

    <li><a href="#">Menu 2</a>
      <ul>              
        <li><a href="#">Opcion 1</a></li>
        <li><a href="#">Opcion 2</a></li>
      </ul>
    </li>
  </ul>

  <h1 id="hola" style="margin-top:500px; padding:100px;">Hola</h1>

2

1 respuesta 1

1

Es muy sencillo, solo necesitas analizar todos los elementos, excepto el que recibió clic, para cerrarlos y, después, abrir o cerrar el que recibió clic.

Con el método closest() obtienes el contenedor padre, desde ahí usas find() para encontrar todas las listas (ul) y recorres con each().

$('.parent a').on("click", function(e) {
  e.stopPropagation();
  e.preventDefault();
  // Obtener UL que se debe mostrar u ocultar
  let current = $(this).next('ul');
  // Obtener todos los UL del mismo nivel
  $(this).closest('ul').find('ul').each((index, item) => {
      // Solo si no se trata del elemento que recibió clic
      if($(item)[0] != $(current)[0]) {
          // Cerrar
          $(item).hide();
      }
  });
  // Abrir o cerrar el que recibió clic
  current.toggle();
});
*{margin:0; padding:0; outline:0; box-sizing:border-box;}

  .parent {display: block;position: relative;float: left;line-height: 30px;background-color: #4FA0D8;border-right:#CCC 1px solid;}
  .parent a{margin: 10px;color: #FFFFFF;text-decoration: none;}
  .parent > ul {position:absolute;}
  .child {display:none;}
  .child li {background-color: #E4EFF7;line-height: 30px;border-bottom:#CCC 1px solid;border-right:#CCC 1px solid; width:100%;}
  .child li a{color: #000000;}
  ul{list-style: none;margin: 0;padding: 0px; min-width:10em;}
  ul ul ul{left: 100%;top: 0;margin-left:1px;}
  li:hover {background-color: #95B4CA;}
  .parent li:hover {background-color: #F0F0F0;}
  .expand{font-size:12px;float:right;margin-right:5px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul id="menu">
    <li class="parent"><a href="#">Popular Toys</a>
    <ul class="child">
      <li class="parent"><a href="#">Video Games <span class="expand">»</span></a>
        <ul class="child">
        <li><a href="#">Car</a></li>
        <li><a href="#">Bike Race</a></li>
        <li><a href="#">Fishing</a></li>
        </ul>
      </li>
      <li><a href="#">Barbies</a></li>
      <li><a href="#">Teddy Bear</a></li>
      <li><a href="#">Golf Set</a></li>
    </ul>
    </li>
    <li class="parent"><a href="#">Recent Toys</a>
    <ul class="child">      
      <li><a href="#">Yoyo</a></li>
      <li><a href="#">Doctor Kit</a></li>
      <li class="parent"><a href="#">Fun Puzzle<span class="expand">»</span></a>
        <ul class="child">
        <li><a href="#" nowrap>Cards</a></li>
        <li><a href="#" nowrap>Numbers</a></li>
        </ul>
      </li>
      <li><a href="#">Uno Cards</a></li>
    </ul>
    </li>
    <li class="parent"><a href="#">Toys Category</a>
    <ul class="child">      
      <li><a href="#">Battery Toys</a></li>
      <li class="parent"><a href="#">Remote Toys <span class="expand">»</span></a>
        <ul class="child">
        <li><a href="#">Cars</a></li>
        <li><a href="#">Aeroplane</a></li>
        <li><a href="#">Helicopter</a></li>
        </ul>
      </li>
      <li><a href="#">Soft Toys</a>
      </li>
      <li><a href="#">Magnet Toys</a></li>
    </ul>
    </li>
  </ul>

3
  • Lo probé con el código que me pasaste, pero al momento de tratar de desplegar el menú de algún child dentro del mismo parent se cierra por completo, mi intención es que se mantengan abiertos todos los submenus de por ejemplo "Popular Toys" y solo se cierren al momento de pasar a otro como "Recent Toys", no se si me explico pero ojala puedas ayudarme.
    – Gir
    el 5 mar. 2021 a las 21:23
  • Listo, solo había que cambiar $(this).closest('#menu') por $(this).closest('ul') para analizar elementos dentro del mismo nivel.
    – Triby
    el 5 mar. 2021 a las 21:42
  • Muchas gracias por tu ayuda, funciona excelente =)
    – Gir
    el 5 mar. 2021 a las 21:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.