Проблема с наведением мыши, наведением мыши в меню JQuery

Question

Я пытаюсь эмулировать меню в http://www.clydeproperty.com/ Я хочу навести курсор мыши на одно из меню и сделать jQuery.load() вызов, чтобы получить опции меню, затем slideDown() div, содержащий опции.

Затем я хотел бы оставить меню открытым, пока вы не переместитесь в другое место на странице, кроме как в открытое меню: в приведенном ниже примере это будет раздел menuOptions.

<div class="menu"><a id="Products" href="#">Products</a></div>
<div class="menu"><a id="Services" href="#">Services</a></div>
<div class="menu"><a id="Contact" href="#">Contact Us</a></div>
<div id="menuOptions"></div>

В настоящее время я использую следующий jQuery для отображения меню:

$('.menu').mouseover(function(){
    $('#menuOptions').load('./MenuOptions.html #' + $(this).children('a').attr('id'), function(){
        $('#menuOptions').stop().slideDown(1200);
    });
});

Я пытался использовать событие $('.menu').mouseout, но оно, конечно, срабатывает всякий раз, когда вы заходите в меню! Это сводит меня с ума, поэтому любая помощь очень ценится.

Один из способов, который я задумал сделать, - добавить почти отрицательный селектор, чтобы добавить событие наведения мыши ко всему, КРОМЕ .menu и #menuOptions, но я знаю, что это далеко не лучшее решение!

Answer 1

Почему бы вам не прикрепить событие mouseout к тегу #menuOptions, поскольку вы хотите оставить его открытым, пока не перейдете в другое место на странице?

Чтобы убедиться, что у вас не открыто более одного меню одновременно, присоедините событие trigger() к другим элементам меню верхнего уровня (например, «Продукты», «Услуги» и т. Д.), Чтобы любые теги #menuOptions div открытые закрываются до открытия желаемого Этот триггер будет запускать событие mouseout для каждого #menuOptions div.

Answer 2

Я бы поместил отдельный div .menuOptions в каждый div .menu (позиционируйте их как абсолютные). Таким образом, вы можете загрузить каждый из них и использовать событие mouseout, чтобы закрыть себя. Вам нужно будет дать ему класс вместо идентификатора, так как их будет несколько.

Затем используйте jQuery, чтобы найти div в классе .menu, например:

$('.menu').find('.menuOptions')

Надеюсь, это поможет.