我正在嘗試在使用 jquery 的工具中向現有的 ul (#top-menu-nav) 添加一個彈出視窗。我唯一遇到的問題是如何添加條件以僅在用戶未懸停 li-item ($elementLi) 或彈出視窗 (.popup-links) 時關閉下拉串列并保持打開狀態，只要用戶懸停在這兩個元素之一上。換句話說; 如何添加當游標離開 li-item 或彈出區域時彈出視窗關閉的條件，無論是第一個。目前，只有當游標移動到彈出區域上并離開時，彈出視窗才會關閉。謝謝您的幫助。
JSFiddle
工具提供的 HTML - 不可編輯
<ul id="top-menu-nav">
<li>Ex1</li>
<li class=" ">
<a href="/index.php?r=custom_pages/view&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>
查詢
$(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();
});
});
uj5u.com熱心網友回復：
您需要在 body 上添加 mousemove 事件以檢查滑鼠是否懸停在選單項或下拉選單上以顯示隱藏
$('body').on('mousemove',(e)=>{
if(!e.target.closest('li') && !e.target.closest('.popup-links') ) $('.popup-links').hide()
})
小提琴
uj5u.com熱心網友回復：
無需更改太多代碼的最簡單方法是在頁面加載時首先隱藏彈出視窗，這意味著添加
$('.popup-links').hide();
喜歡
$(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();
});
});
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/390269.html
標籤：javascript 查询
上一篇：jQuery$.post突然需要手動決議JSON回應
下一篇：新專案如何技術選型以及落地實作