[英]jQuery close dropdown on mouseleave of two elements
I'm trying to add a popup to an existing ul (#top-menu-nav) in a tool with jquery.我正在尝试使用 jquery 在工具中向现有 ul (#top-menu-nav) 添加一个弹出窗口。 The only thing I'm struggling with is how to add the condition to only close the dropdown when the user is not hovering the li-item ($elementLi) or the popup (.popup-links) and keep it open as long the user is hovering over one of these two elements.
我唯一苦苦挣扎的是如何添加条件以仅在用户未悬停 li-item ($elementLi) 或弹出窗口 (.popup-links) 时关闭下拉菜单并保持打开状态只要用户悬停在这两个元素之一上。 In other words;
换句话说; How can I add the condition the popup closes when the cursor leaves the li-item or the popup area, whatever is first.
当 cursor 离开 li-item 或弹出区域时,我如何添加弹出关闭的条件,无论是第一个。 Currently the popup only closes when the cursor moves over the popup-area and leaves it.
目前,仅当 cursor 移过弹出区域并离开时,弹出窗口才会关闭。 Thank you for your help.
谢谢您的帮助。
HTML given by the tool - not editable工具给出的 HTML - 不可编辑
<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 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 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();
});
});
you need to add mousemove event on body to check whether mouse is hovering onto the menu-item or the dropdown in order to show hide您需要在 body 上添加 mousemove 事件以检查鼠标是否悬停在菜单项或下拉菜单上以显示隐藏
$('body').on('mousemove',(e)=>{
if(!e.target.closest('li') && !e.target.closest('.popup-links') ) $('.popup-links').hide()
})
easiest way without changing much code is to first hide the popup when the page loads that means add无需更改太多代码的最简单方法是在页面加载时首先隐藏弹出窗口,这意味着添加
$('.popup-links').hide();
like喜欢
$(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();
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.