2017-01-29 3 views
0

Я использую 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); 
}); 
+0

https://codepen.io/anon/pen/mRqxJa вчера я создал этот codepen для кого-то. Похоже на вашу проблему. Можете ли вы посмотреть, поможет ли вам это. –

+0

Не могли бы вы попытаться выделить, является ли это проблемой css или проблемой javascript? – wahwahwah

ответ

1

Как вы хотите сохранить видимые подменю до щелчка вне этого подменю. Вам нужно сделать следующее:

  1. Удалить out: doClose из config, чтобы ваш подменю остается видимым после пунктов меню парения.

  2. Но вам нужно добавить $('.Menu').hide(); верхнюю часть функции function doOpen() {....}

  3. Добавить этот скрипт, который позволит скрыть открытый подменит на тела мыши.

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

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

+0

У вас есть идея, продолжайте и реализуйте все остальное. дайте мне знать, как далеко продвинулся ваш прогресс. –

 Смежные вопросы

  • Нет связанных вопросов^_^