1

Quiero que, al tocar un botón, aparezca el menú y que al volverlo a tocar, desaparezca. No entiendo por qué no funciona. Teóricamente está todo bien, ¿Alguien sabe alguna solución?

El código en cuestión es el siguiente, muchas gracias, pongo un poco más de texto porque la página no me deja publicar la pregunta, disculpen las molestias:

$(document).ready(main);

document.getElementByClassName(".menu_bar").addEventListener('click', slide);

function main()
{
  //Para que al tocar el ||| aparezca y desaparezca el menu
  function slide()
  {
    document.getElementByClassName(".nav").toggle();
  }
  //Para que al tocar "Quienes somos?" E "Institutos Dependientes" aparezca o desaparezca
  $(".arriba").click(function(){
        $(this).children("ul").slideToggle();
    })
};
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <meta name="viewport" content="width=device-width, user-scalabre=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  </head>
  <body>
    <div class="header">
      <div class="menu_bar">
        <a href="#"><img src="img/menu.png">Menu</a>
      </div>
      <nav>
        <ul class="nav">
          <li class="arriba"><a href="inicio.php">Inicio</a></li>
          <li class="arriba"><a href="#">¿Quienes Somos?</a>
            <ul style="display: none;">
              <li><a href="quienessomos/historia.php">Historia</a></li>
              <li><a href="quienessomos/heraldica.php">Heráldica del logo</a></li>
              <li><a href="quienessomos/institucional.php">Institucional</a></li>
              <li><a href="quienessomos/autoridades.php">Autoridades</a></li>
              <li><a href="quienessomos/organigrama.php">Organigrama</a></li>
            </ul></li>
          <li class="arriba"><a href="galeria.php">Galería Digital</a></li>
          <li class="arriba"><a href="novedades.php">Novedades</a></li>
          <li class="arriba"><a href="contacto.php">Contacto</a></li>
        </ul>
      </nav>
    </div>
    <script src="https://unpkg.com/[email protected]/dist/aos.js"></script>
    <script>AOS.init();</script>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script src="include/menu.js"></script>
  </body>
</html>

8
  • ¿Un funcionamiento similar al botón de menú de Bootstrap?
    – padaleiana
    Commented el 23 ago. 2022 a las 14:16
  • Supongo que el problema es que quieres mostrar elementos "simples" usando funciones para sliders. Tal vez sería suficiente cambiar .slideToggle() por .toggle()
    – Triby
    Commented el 23 ago. 2022 a las 15:38
  • @Triby Tampoco funciona, no se que será, es mas, si pongo este código: $(".menu_bar").click(function() { $(".nav").slideToggle(); }); Si funciona, no se xq no puedo hacerlo de la otra forma, y me pidieron q lo haga de la otra forma no se xq jajajajajja Commented el 24 ago. 2022 a las 11:22
  • @padaleiana Claro, similar a un botón de menú de Boostrap Commented el 24 ago. 2022 a las 11:25
  • Puedes agregar un ejemplo mínimo verificable como snippet (con el botón que indica <>) para ejecutar el código en la pregunta misma.
    – padaleiana
    Commented el 24 ago. 2022 a las 11:39

2 respuestas 2

1

Puede que no necesites jQuery, hay muchas cosas que pueden hacerse con un poco de CSS y Javascript puro.

Nota: En lugar de usar getElementsByClassName() o similares, prefiero querySelector() para obtener un solo elemento y querySelectorAll() para una lista de nodos, solo se debe proporcionar el selector CSS adecuado (por ID, clase, etiqueta, etc.)

Revisa los comentarios en el código para saber lo que se hace en cada paso.

// Ejecutar hasta que se haya cargado el DOM
document.addEventListener('DOMContentLoaded', e => {
    // Asignar evento a enlace del menú
    document.querySelector('.menu_bar a').addEventListener('click', e => {
        // Alternar para agregar o quitar clase
        document.querySelector('.nav').classList.toggle('open');
    });
    // Obtener todos los submenús y recorrer para asignar evento
    document.querySelectorAll('.submenu > a').forEach(submenu => {
        // Evento para seleccionar elementos que muestran submenú
        submenu.addEventListener('click', e => {
            // e.currentTarget es el enlace que recibió clic
            // closest('li') es para acceder al contenedor común del enlace y submenú
            // querySelector('ul') selecciona el submenú
            // Alternar para agregar o quitar clase
            e.currentTarget.closest('li').querySelector('ul').classList.toggle('open');
        });
    });
});
/* Ocultar menú moviéndolo a la izquierda */
.nav {
    margin-left: -100%;
    transition: all 0.3s ease;
}
/* Mostrar el menu */
.nav.open {
    margin-left: 0;
}
/* Ocultar submenús asignando altura máxima en cero */
.nav ul {
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
/* Mostrar submenús cambiando la altura máxima a un valor que permita mostrarlo */
.nav ul.open {
    max-height: 150px;
}
<div class="menu_bar">
    <a href="#"><img src="img/menu.png">Menu</a>
</div>
<nav>
    <ul class="nav">
        <li class="arriba"><a href="inicio.php">Inicio</a></li>
        <li class="arriba submenu"><a href="#">¿Quienes Somos?</a>
            <ul>
                <li><a href="quienessomos/historia.php">Historia</a></li>
                <li><a href="quienessomos/heraldica.php">Heráldica del logo</a></li>
                <li><a href="quienessomos/institucional.php">Institucional</a></li>
                <li><a href="quienessomos/autoridades.php">Autoridades</a></li>
                <li><a href="quienessomos/organigrama.php">Organigrama</a></li>
            </ul>
        </li>
        <li class="arriba submenu"><a href="#">Otro submenú</a>
            <ul>
                <li><a href="seccion/pagina1.php">Página 1</a></li>
                <li><a href="seccion/pagina2.php">Página 2</a></li>
            </ul>
        </li>
    </ul>
</nav>

1
  • Opté por utilizar $(".menu_bar").click(function() { $(".nav").slideToggle(); }); Ahora tengo otra consulta, como puedo hacer un IF con el width de la pantalla en ese momento? Porque cuando achico la pantalla no funciona, tengo que tocar F5 para que funcione (Iniciar la página con el width de celular) Commented el 25 ago. 2022 a las 11:57
0

Realice un ejemplo de cómo usar la librería jQuery en este proyecto.

Se puede descargar el archivo jQuery de su sitio web y usar sin problemas en la computadora.

Pero también se puede mediante el CDN, usar el solamente el enlace de esa librería, como en este ejemplo, puesto la etiqueta al pie del body.

Modifique bastante el código para usar solamente con jQuery. Pero de igual forma, con tu código original funcionaria, siempre y cuando agregues en al final del body el script de jQuery.

(function() {

let menu = $(".menu_bar");
let nav = $(".nav");
let arriba = $(".arriba");

$(menu).on("click", function() { slide() });    

function slide() {
    
    nav.slideToggle();

};

$(arriba).on("click", function() {
    
    $(this).children("ul").slideToggle();

});

})(jQuery)
<html>
<body>        
    
    <div class="menu_bar"> 
        <a href="#"><img src="img/menu.png">Menu</a>
    </div> 
    
    <nav> 
        <ul class="nav"> 
            
            <li class="arriba">
                
                <a href="inicio.php">Inicio</a>
                
            </li> 
            <li class="arriba">
                
                <a href="#">¿Quienes Somos?</a> 
                
                <ul style="display: none;"> 
                    
                    <li>
                        
                        <a href="quienessomos/historia.php">Historia</a>
                        
                    </li> 
                    <li>
                        
                        <a href="quienessomos/heraldica.php">Heráldica del logo</a>
                        
                    </li>
                    <li>
                        
                        <a href="quienessomos/institucional.php">Institucional</a>
                        
                    </li> 
                    <li>
                        
                        <a href="quienessomos/autoridades.php">Autoridades</a>
                        
                    </li> 
                    <li>
                        
                        <a href="quienessomos/organigrama.php">Organigrama</a>
                        
                    </li> 
                </ul>
            </li>
        </ul>
    </nav> 
    
    <script src="https://code.jquery.com/jquery-3.6.0.js"></script> 
</body>
</html>

1
  • Ahi me di cuenta q si habia añadido la librería (Solo q la latest) La cambié x la q me pusiste y tampoco funcionó, no se que onda, ahora voy a intentar modificar la pregunta para que se pueda ejecutar el código, si lo puedo ejecutar entonces no se que será Commented el 24 ago. 2022 a las 16:00

Tu Respuesta

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

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