jQuery的：隱藏觸發或彈出

我已經出現在我頁這樣的一個元素的onclick事件彈出菜單的鼠標離開事件彈出...jQuery的：隱藏觸發或彈出

$('.triggerDiv').click(function() { 
    var pos = $(this).offset(); 
    $('#popupDiv').css({ 
      "left": (pos.left + this.width()) + "px", 
      "top": pos.top + "px" 
     }).slideDown(); 
});

我也有連接到mouseLeave事件彈出以將其隱藏在mouseleave上。

$('#popupDiv').mouseleave(function() { 
    $('#popupDiv').slideUp(); 
});

如果鼠標離開觸發器，我想要做的就是隱藏彈出窗口。簡單的解決方案將是 -

$('.triggerDiv').mouseleave(function() { 
    $('#popupDiv').slideUp(); 
});

但問題是，我有多個觸發元素在頁面上都顯示相同的彈出onclick。在這種情況下，我該如何正確處理mouseleave事件來隱藏/顯示彈出窗口？

來源

2011-10-19 vikmalhotra

你只有一個ID爲「popupDiv」的元素，多個元素如何觸發它顯示？ – iWantSimpleLife

@iWantSimpleLife - 在觸發元素中單擊事件我也使用絕對定位來顯示觸發器右側的彈出菜單。 – vikmalhotra

@ShiVik你的代碼看起來非常合理。你有什麼問題嗎？我唯一要改變的不是分別選擇''＃popupDiv「'和'」.triggerDiv「'，我會同時使用''#popupDiv，.triggerDiv」'選擇兩種類型的元素' 。 – Xavi

爲了保證在使用時的鼠標已經離開這兩個彈出式和觸發-DIV彈出只關閉，試試這個代碼：

var closeTimer; 

$("#popupDiv, .triggerDiv") 
    .mouseleave(function() { 
     closeTimer = setTimeout(function() { 
      $('#popupDiv').slideUp(); 
     }, 300); 
    }) 
    .mouseenter(function() { 
     if(closeTimer) { closeTimer = clearTimeout(closeTimer); } 
    });

上面的代碼使用setTimeout功能關閉彈出之前等待300毫秒。這給用戶足夠的時間將他們的鼠標從觸發器移動到彈出窗口，反之亦然。請注意，當用戶的鼠標進入彈出窗口時，代碼可以通過使用clearTimeout來取消closeTimer來防止彈出窗口關閉。根據我的經驗，這使彈出式菜單和懸停菜單更易於使用。

此外，如果有大量的.triggerDiv S，我會考慮使用live events。

來源

2011-10-19 06:10:51 Xavi

+1謝謝你。這解決了這個問題。 – vikmalhotra

使用在函數體中一個jQuery $(this)參考：

$('.triggerDiv').mouseleave(function() { 
    $(this).slideUp(); 
});

來源

2011-10-19 05:57:00 millhouse

我想隱藏（滑動）彈出式菜單而不是觸發器元素本身。 – vikmalhotra

jQuery的：隱藏觸發或彈出

回答

相關問題