Как я могу создать исключение для события jquery mouseout, только если еще одно событие mouseover не было запущено?

Question

В основном мой клиент хочет, чтобы скрытая навигация появлялась при наведении курсора на изображение. Я решил проблему с навигацией: не скрывать при наведении мыши на навигацию, а затем скрывать при выходе из навигации. Есть две проблемы, с которыми я сталкиваюсь, и я попробовал множество различных комбинаций, которые, как я думал, сработают, но, конечно, не сработали. Две проблемы:

1. При наведении мыши на изображение без мыши над навигацией, навигация должна быть скрыта, поскольку на данный момент она остается открытой, пока вы снова не наведите курсор мыши на изображение или не оставите мышью навигацию.

2. Вторая проблема - когда вы оставляете навигацию мышью непосредственно, чтобы навести указатель мыши на изображение, оно зацикливает функцию и скрывает навигацию, а затем снова открывает навигацию, я попытался изменить показ слайд-тугля, но это вызывает целую кучу других вопросы.

Прямо сейчас код ведет себя настолько близко, насколько я хочу, и его можно считать приемлемым, но я бы хотел знать, как решить вышеуказанные проблемы. Я думал об использовании плагина hoverIntent для определения движения мыши и запуска функций только после того, как мышь замедлилась, но не смогла заставить ее работать должным образом. Очевидно, что я новичок, когда дело доходит до javascript и jquery, поэтому, пожалуйста, прости меня, но я очень признателен за любую помощь.

Вот мой код

$(document).ready(function(){

$(".nav-body").hide();

$(".nav-head").mouseover(function(){
$(this).next(".nav-body").slideToggle(600);
$(".nav-body").mouseleave(function(){
$(this).hide(700);
});
});

});

Вот мой HTML:

<p class="nav-head"><img src="/images/face-btn.jpg" /></p> 
<div class="nav-body"> 
<ul><?php wp_list_pages('title_li=&child_of=12&depth=1'); ?></ul> 
</div>

Answer 1

Изменение разметки

<div class="nav-container">
    <p class="nav-head"></p>
    <div class="nav-body"></div>
</div>

Javascript

var eventHandler;

eventHandler = function(){$(".nav-head").one("mouseover",function(){
   $(this).next(".nav-body").slideToggle(600);
    $(".nav-container").one("mouseleave", function(){
        $(this).find(".nav-body").hide(700, eventHandler);
    });
});};

eventHandler();

Первое изменение - от отпускания мыши до отключения мыши.Внутри навигации, вероятно, будут дочерние элементы, которые покрывают фактическое тело nav.При отпускании мыши обработчик срабатывает только тогда, когда мышь покидает связанный элемент.Если он переходит в нисходящие элементы, это считается уходом.Mouseout срабатывает только в том случае, если он находится за пределами связанного объекта.

Второе, что я сделал, - назначил делегата для операции привязки обработчика, чтобы я мог использовать его как функцию обратного вызова для hide ().Таким образом, обработчик событий не будет восстановлен в nav-head до тех пор, пока скрытие не будет полностью выполнено.

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