2 Pregunta: Cómo hacer que la barra de navegación desaparezca cuando hago clic en la etiqueta de enlace del menú

pregunta creada en Wed, Apr 10, 2019 12:00 AM

Tengo esta barra de navegación. Funciona como lo quiero, pero mi problema principal es que quiero que desaparezca el menú desplegable haciendo clic en los enlaces del menú porque no estoy seguro de qué agregar a mi código actual para que se comporte. como se desee. Gracias cualquier ayuda sería apreciada

                                                            
<nav id="navbar">
    <div class="logo">
         <a href="#zero"><img src="log.png"></a>
    </div>

    <ul>
        <li><a href="#lowerSec" class="active">About</a></li>
  <li><a href="#container">Contact</a></li>
  <li><a href="#">Project</a></li>
  <li><a href="#">Home</a></li>

    </ul>
</nav>

Aquí está mi JS

Funciona bien, solo una de las funciones adicionales que mencioné en el título, ya que no sé cómo hacerlo

    <script type="text/javascript">

    $(window).on('scroll', function()
   {

    if($(window).scrollTop())
   {
     $('nav').addClass('black');
    }

   else
   {
     $('nav').removeClass('black');
   }
   }
   )

   $(document).ready(function() {
   $(".menu").on("click", function() {
   $("nav ul").toggleClass("active");
   });
  })

    
0
2 Respuestas                              2                         

Simplemente agregue el nav ul li a a su función de clic. Como no sé cómo se ve su marca, aquí hay una demostración rápida:

$(".menu, nav ul li a").on("click", function(e) {
  e.preventDefault();
  $("nav ul").toggleClass("active");
});
ul{
  display:none;
}

ul.active{
  display:block;
}
<script
  src="https://code.jquery.com/jquery-3.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  
<nav>
  <button class="menu">
  Menu
  </button>
  <ul>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
    <li><a href="#">Link</a></li>
  </ul>
</nav>

Con jquery puedes comas selectores separados. Como ya tiene la funcionalidad para alternar entre la clase activa, simplemente agregue el nav ul li a a su función existente.

    
0
2019-04-10 01: 27: 01Z

Un estilo CSS puede ser una solución potencial. todas las etiquetas se muestran como bloques, por lo que en su archivo CSS añada

    .makeDisappear{
    display:none
    }

Aunque, recomiendo cambiar el nombre de tu ID para tu barra de navegación algo un poco más único.

así que el ejemplo jQuery sería:

$("a").on("click",function(){
document.getElementById("navbar").classList.add("makeDisappear");

//or simply $("#navbar").addClass("makeDisappear")
})

para hacer que tu barra de navegación reaparezca cambiar visualización: ninguna para mostrar: bloque

    
0
2019-04-10 01: 29: 05Z
  1. Lo probé pero no hace nada por la clase makeDisappear ¿a qué etiqueta le doy?
    2019-04-10 01: 50: 40Z
fuente colocada aquí