保持下拉菜单可见，直到用 Jquery 在其外部单击

Question

我正在使用 Jquery 显示下拉菜单 onMouseEnter 导航 link，我用 hoverIntent 包裹了 onMouseEnter:
https://github.com/briancherne/jquery-hoverIntent
（用于在不使用 OnMouseOut 的情况下控制 OnMouseEnter 的灵敏度，因为这不是我想要的）：

我希望 jquery 代码在下拉菜单外单击或 onMouseEnter 另一个导航时关闭下拉菜单 link。

代码笔：
https://codepen.io/anon/pen/zNPbRp
JSFiddle:
https://jsfiddle.net/6jc6pjLu/1/

结构：
-我有两个带有下拉菜单的导航 link，一个带有 class MySecondLink，另一个带有 class MyThirdLink。
-下拉菜单，一个带有 class MySecondLinkTabLinks，另一个带有 class MyThirdLinkTabLinks

jQuery 过程：(在鼠标输入导航 link，将 class 值 "PopupClosed" 替换为 "PopupOpen"在导航 link 上用于样式目的，并将 display:none; 替换为 display:block; 在下拉菜单上显示它）这是显示下拉菜单的过程，关闭它（将 PopupOpen 替换为 PopupClosed在导航 link 上并将 display:block; 替换为 display:none; 在下拉菜单中）：

jQuery(document).ready(function($) {
var config = {   
     sensitivity: 1, // number = sensitivity threshold (must be 1 or higher)   
     interval: 100,  // number = milliseconds for onMouseOver polling interval   
     over: doOpen,   // function = onMouseOver callback

/* Don't want onMouseOut from hoverIntent */ 
//    timeout: 0,   // number = milliseconds delay before onMouseOut   
//     out: doClose    // function = onMouseOut callback  
};

function doOpen() {
    $(this).removeClass('PopupClosed').addClass('PopupOpen');
    var cls = $(this).data('target'); // fetch data-target value.
    $('.Menu.' + cls).css('display','block'); // will make display block
}

/* Commented out because I want to apply another approach for closing the menu as doClose() depends only on mouseOut.

function doClose() {
    $(this).addClass('PopupClosed').removeClass('PopupOpen');
    var cls = $(this).data('target'); // fetch which class to target.
    $('.Menu.' + cls).css('display','none'); // will make display none
}

*/

$(".navTab.Popup").hoverIntent(config);
});

Answer 1

因为你想保持子菜单可见，直到在该子菜单外单击。您需要执行以下操作：

从 config 中删除 out: doClose 以便您的子菜单在悬停菜单项后保持可见。
但是需要在函数的顶部加上$('.Menu').hide();function doOpen() {....}
添加这些脚本，允许在正文点击时隐藏打开的子菜单。

$(document).click(function(event) { $('.Menu').hide(); });

https://codepen.io/avastamin/pen/XpzQXB

保持下拉菜单可见，直到用 Jquery 在其外部单击

Keep a dropdown menu visible until clicked outside of it with Jquery

html

javascript

css

jquery

jquery-mobile