Estoy tratando de agregar una ventana emergente a una ul existente (#top-menu-nav) en una herramienta con jquery. Lo único con lo que estoy luchando es cómo agregar la condición para cerrar solo el menú desplegable cuando el usuario no está pasando el elemento li ($elementLi) o la ventana emergente (.popup-links) y mantenerlo abierto mientras el usuario se cierne sobre uno de estos dos elementos. En otras palabras; ¿Cómo puedo agregar la condición de que la ventana emergente se cierre cuando el cursor abandone el elemento li o el área emergente, lo que sea primero? Actualmente, la ventana emergente solo se cierra cuando el cursor se mueve sobre el área emergente y la abandona. Gracias por tu ayuda.
HTML proporcionado por la herramienta - no editable
<ul id="top-menu-nav"> <li>Ex1</li> <li class=" "> <a href="/index.php?r=custom_pages%2Fview&id=26" target="" data-sort-order="800"><i class="fa fa-link"></i> Links</a> </li> <li>Ex2</li> </ul>HTML
<div class="popup-links"> <ul class="popup-links-content"> <p style="font-weight: 700; padding-top: 20px;">Social Media</p> <li><a href="">LinkedIn</a></li> <li><a href="">Instagram</a></li> <li><a href="">Vimeo</a></li> </ul> </div>jquery
$(function() { $elementA = $('#top-menu-nav').find('a:contains("Links")'); $elementLi = $elementA.closest('li'); $elementLiPos = $elementLi.position(); $($elementLi).mouseover(function() { var pos = $(this).position(); var width = $(this).outerWidth(); $('.popup-links').css({ position: "fixed", top: pos.top + "px", left: (pos.left + width) + "px" }).show(); }); $('.popup-links').on('mouseleave', function(){ $(this).hide(); }); });debe agregar el evento mousemove en el cuerpo para verificar si el mouse se encuentra sobre el elemento del menú o el menú desplegable para mostrar ocultar
$('body').on('mousemove',(e)=>{ if(!e.target.closest('li') && !e.target.closest('.popup-links') ) $('.popup-links').hide() })La forma más fácil sin cambiar mucho el código es ocultar primero la ventana emergente cuando se carga la página, lo que significa agregar
$('.popup-links').hide();me gusta
$(function() { //here $('.popup-links').hide(); $elementA = $('#top-menu-nav').find('a:contains("Links")'); $elementLi = $elementA.closest('li'); $elementLiPos = $elementLi.position(); $($elementLi).mouseover(function() { var pos = $(this).position(); var width = $(this).outerWidth(); $('.popup-links').css({ position: "fixed", top: pos.top + "px", left: (pos.left + width) + "px" }).show(); }); $('.popup-links').on('mouseleave', function(){ $(this).hide(); }); });