¿Cómo puedo cerrar una barra de navegación colapsada abierta al hacer clic fuera del elemento de la barra de navegación? Actualmente, la única forma de abrirlo o cerrarlo es haciendo clic en el botón de alternancia de la barra de navegación.
Ver aquí para un ejemplo y código:
Hasta ahora, he intentado lo siguiente que no parece funcionar:
$(document).ready(function () { $(document).click(function () { // if($(".navbar-collapse").hasClass("in")){ $('.navbar-collapse').collapse('hide'); // } }); });Pero el método anterior no funciona.
la forma más fácil sería adjuntar un detector de eventos de clic a la etiqueta del cuerpo.
document.body.addEventListener('click', (e) => { if($(".navbar-collapse").hasClass("in")){ $('.navbar-collapse').collapse('hide'); } })Puede definir una función y llamar a mouseleave . Aquí hay un ejemplo:
function showMeTheMoney() { $('.treasure').toggle(); } .treasure { background:blue; color:white width:100px;height:50px; position:absolute;bottom:0;right:0; display:none; } div { height:200px;width:200px; } .somespan { width:100px; height:100px; background:yellow; color:red; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div> <span class="somespan" onmouseleave="showMeTheMoney();">Hover this red span and leave it with your mouse to reveal the treasure</span> <span class="treasure">The treasure is found.</span> </div>Debe agregar un detector de eventos en el documento y verificar si el clic está fuera de la barra de navegación:
// listen to clicks in document document.addEventListener("click", (evt) => { let targetElement = evt.target; const navbar = document.querySelector('.navbar-collapse'); const navbarToggler = document.querySelector('.navbar-toggle'); do { // open menu when click is on toggle button and menu does not have the 'in' class if (targetElement == navbarToggler && ! navbar.classList.contains('in')) { navbar.classList.add('in'); return; } // do nothing when clicked in navbar else if (targetElement == navbar) { return; } // Go up the DOM targetElement = targetElement.parentNode; } while (targetElement); // when clicked outside of navbar navbar.classList.remove('in'); });