Hice una barra de navegación donde el subnav se muestra en pantalla completa al pasar el mouse mientras se cierran los otros subnavs. La navegación secundaria a pantalla completa siempre permanece abierta hasta que vayas a una nueva página.
Quiero construir un botón de cierre para que también pueda cerrar el subnav (¡no se cierra automáticamente al pasar el mouse hacia afuera!) Haciendo clic en él y eso funciona parcialmente porque se desvanece pero vuelve a aparecer de inmediato.
Creo que el problema es que el botón de cierre está en el div flotante que activa el fundido de entrada del subnavegador. ¿Hay alguna manera de anular eso con javascript?
$('li.menu-item-has-children').hover(function () { $('ul.dropdown-menu-main', this).fadeIn('slow'); $(this).parent().children().not(this).find('ul.dropdown-menu-main').fadeOut(); }); $('.close').click(function () { $('ul.dropdown-menu-main').fadeOut('fast'); }); * { padding:0; margin:0; } ul, ul li { list-style:none; padding:0; margin:0; } li { display: inline-block; position: relative; margin-right:20px !important; } ul.dropdown-menu-main { display:none; position:fixed; top:0px; left:0px; width:100%; height:100vh; background:black; z-index:-1; padding:30px 0; } ul.dropdown-menu-main li { color:white; } .close { position:absolute; top:70px; left:0px; z-index:99; color:#aaaaaa; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="menu-item-has-children"> <a href="#">Main 1</a> <ul class="dropdown-menu-main"> <div class="close"> close </div> <li>Sub 1</li> </ul> </li> <li class="menu-item-has-children"> <a href="#">Main 2</a> <ul class="dropdown-menu-main"> <div class="close"> close </div> <li>Sub 2</li> </ul> </li> </ul>No apunte a todo el <li> , solo apunte al <a> interior.
Sin embargo, ten en cuenta que un cajón o un menú siempre debe ser más fácil de cerrar que de abrir. Tener una superposición de página completa que se abre fácilmente al pasar el mouse, pero requiere un clic para desaparecer, es irritante y no funciona desde el punto de vista de UX.
$('li.menu-item-has-children a').hover(function() { const $this = $(this); $this.next(".dropdown-menu-main").fadeIn('slow') $this.parent().siblings() .find('ul.dropdown-menu-main') .fadeOut(); }); $('.close').click(function(e) { $('ul.dropdown-menu-main').fadeOut('slow'); }); * { padding: 0; margin: 0; } ul, ul li { list-style: none; padding: 0; margin: 0; } li { display: inline-block; position: relative; margin-right: 20px !important; } ul.dropdown-menu-main { display: none; position: fixed; top: 0px; left: 0px; width: 100%; height: 100vh; background: black; z-index: -1; padding: 30px 0; } ul.dropdown-menu-main li { color: white; } .close { position: absolute; top: 70px; left: 0px; z-index: 99; color: #aaaaaa; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <ul> <li class="menu-item-has-children"> <a href="#">Main 1</a> <ul class="dropdown-menu-main"> <div class="close"> close </div> <li>Sub 1</li> </ul> </li> <li class="menu-item-has-children"> <a href="#">Main 2</a> <ul class="dropdown-menu-main"> <div class="close"> close </div> <li>Sub 2</li> </ul> </li> </ul>La razón por la que esto no funciona es porque el "cerrar" está causando que el evento de desplazamiento se dispare en el padre.
si lo quitas del li empezará a funcionar
ver este violín https://jsfiddle.net/oe6yL0gt/