Я использую Jquery для отображения выпадающего меню OnMouseEnter навигации ссылку, я обернул OnMouseEnter с hoverIntent:
https://github.com/briancherne/jquery-hoverIntent
(используется для контроля чувствительности OnMouseEnter без использования OnMouseOut как это не то, что я хочу):
Держите выпадающее меню видимым до тех пор, пока нажата вне его с Jquery
Я хочу JQuery код, чтобы закрыть выпадающее меню при щелкнул вне этого выпадающего меню или OnMouseEnter другой ссылки навигации.
Codepen:
https://codepen.io/anon/pen/zNPbRp
JSFiddle:
https://jsfiddle.net/6jc6pjLu/1/
Состав:
-Есть две навигационные ссылки, которые несут ниспадающее меню, один с классом MySecondLink, другой с классом MyThirdLink.
-Dropdown меню, один с классом MySecondLinkTabLinks, другое с классом MyThirdLinkTabLinks
JQuery процесс: (OnMouseEnter навигационной ссылки, заменить значение класса "PopupClosed" с "PopupOpen" на ссылках навигации для стилирование и замена дисплея: нет, с дисплеем: блок, в раскрывающемся меню, чтобы показать его), это процесс отображения выпадающего меню, закрытие его (замените PopupOpen на PopupClosed на ссылке навигации и замените display: block; с дисплеем: нет, в выпадающем меню):
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);
});
https://codepen.io/anon/pen/mRqxJa вчера я создал этот codepen для кого-то. Похоже на вашу проблему. Можете ли вы посмотреть, поможет ли вам это. –
Не могли бы вы попытаться выделить, является ли это проблемой css или проблемой javascript? – wahwahwah