jQuery 關閉兩個元素的鼠標離開下拉菜單

Question

我正在嘗試使用 jquery 在工具中向現有 ul (#top-menu-nav) 添加一個彈出窗口。 我唯一苦苦掙扎的是如何添加條件以僅在用戶未懸停 li-item ($elementLi) 或彈出窗口 (.popup-links) 時關閉下拉菜單並保持打開狀態只要用戶懸停在這兩個元素之一上。 換句話說; 當 cursor 離開 li-item 或彈出區域時，我如何添加彈出關閉的條件，無論是第一個。 目前，僅當 cursor 移過彈出區域並離開時，彈出窗口才會關閉。 謝謝您的幫助。

JSFiddle

工具給出的 HTML - 不可編輯

<ul id="top-menu-nav">
  <li>Ex1</li>

  <li class=" ">
    <a href="/index.php?r=custom_pages%2Fview&amp;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();
});
});

Answer 1

您需要在 body 上添加 mousemove 事件以檢查鼠標是否懸停在菜單項或下拉菜單上以顯示隱藏

$('body').on('mousemove',(e)=>{
    if(!e.target.closest('li') && !e.target.closest('.popup-links') ) $('.popup-links').hide()
})

小提琴

Answer 2

無需更改太多代碼的最簡單方法是在頁面加載時首先隱藏彈出窗口，這意味着添加

$('.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();
});
});