因此，根據業務需求，我有一個單擊顯示的下拉菜單。將鼠標移開菜單后，該菜單將再次隱藏。但是現在我被要求將其保留在原處，直到用戶單擊文檔上的任何位置。如何做到這一點？這是我現在所擁有的簡化版本：$(document).ready(function() { $("ul.opMenu li").click(function(){ $('#MainOptSubMenu',this).css('visibility', 'visible'); }); $("ul.opMenu li").mouseleave(function(){ $('#MainOptSubMenu',this).css('visibility', 'hidden'); });});<ul class="opMenu"> <li id="footwo" class=""> <span id="optImg" style="display: inline-block;"> <img src="http://localhost.vmsinfo.com:8002/insight/images/options-hover2.gif"/> </span> <ul id="MainOptSubMenu" style="visibility: hidden; top: 25px; border-top: 0px solid rgb(217, 228, 250); background-color: rgb(217, 228, 250); padding-bottom: 15px;"> <li>some</li> <li>nav</li> <li>links</li> </ul> </li></ul> 我嘗試過這樣的$('document[id!=MainOptSubMenu]').click(function()想法，認為它會觸發菜單上沒有的任何東西，但是沒有用。
3 回答
互換的青春
TA貢獻1797條經驗 獲得超6個贊
將單擊事件附加到關閉窗口的文檔主體。將單獨的click事件附加到窗口，該事件將停止傳播到文檔主體。
$('html').click(function() {
//Hide the menus if visible
});
$('#menucontainer').click(function(event){
event.stopPropagation();
});
慕勒3428872
TA貢獻1848條經驗 獲得超6個贊
答案是正確的，但它將添加一個偵聽器，該偵聽器將在您的頁面上每次單擊時觸發。為了避免這種情況，您可以只添加一次偵聽器：
$('a#menu-link').on('click', function(e) {
e.preventDefault();
e.stopPropagation();
$('#menu').toggleClass('open');
$(document).one('click', function closeMenu (e){
if($('#menu').has(e.target).length === 0){
$('#menu').removeClass('open');
} else {
$(document).one('click', closeMenu);
}
});
});
編輯：如果您要避免stopPropagation()使用初始按鈕，可以使用此按鈕
var $menu = $('#menu');
$('a#menu-link').on('click', function(e) {
e.preventDefault();
if (!$menu.hasClass('active')) {
$menu.addClass('active');
$(document).one('click', function closeTooltip(e) {
if ($menu.has(e.target).length === 0 && $('a#menu-link').has(e.target).length === 0) {
$menu.removeClass('active');
} else if ($menu.hasClass('active')) {
$(document).one('click', closeTooltip);
}
});
} else {
$menu.removeClass('active');
}
});
開滿天機
TA貢獻1786條經驗 獲得超13個贊
如果您可以使用插件，那么我建議Ben Alman位于此處的clickoutside插件：
它的用法很簡單：
$('#menu').bind('clickoutside', function (event) {
$(this).hide();
});
希望這可以幫助。
- 3 回答
- 0 關注
- 466 瀏覽
添加回答
舉報
0/150
提交
取消