Question

我使用Jquery显示一个下拉菜单onMouseEnter一个导航链接，我用moverIntent包装onMouseEnter：
https://github.com/briancherne/jquery-hoverIntent
（用于控制OnMouseEnter的敏感度而不使用OnMouseOut，因为这不是我想要的）：

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

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

结构：
- 我有两个带有下拉菜单的导航链接，一个带有MySecondLink类，另一个带有MyThirdLink类。
-Dropdown菜单，一个是MySecondLinkTabLinks类，另一个是类MyThirdLinkTabLinks

jQuery流程：（onMouseEnter导航链接，替换类值＆＃34; PopupClosed＆＃34;使用＆＃34; PopupOpen＆＃34;在导航链接上进行样式设置，并替换display： none; with display：block;在下拉菜单中显示它）这是显示下拉菜单的过程，关闭它（用导航链接上的PopupClosed替换PopupOpen并替换display：block; with display：none; on下拉菜单）：

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

您希望在子菜单外部单击之前保持子菜单可见。您需要执行以下操作：

从out: doClose移除config，以便在悬停菜单项后您的子菜单仍然可见。
但您需要添加$('.Menu').hide();函数顶部的function doOpen() {....}
添加这些脚本，以便在点击身体时隐藏已打开的子菜单。

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

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

保持一个下拉菜单可见，直到用Jquery点击它外面

1 个答案: