Выпадающее меню Jquery Mouseout

Question

Я пытаюсь исправить мое событие с мышью.

У меня есть элемент

<div id="dropdown"></div>

чтобы показать, когда я нахожусь на нем. Но я хочу, чтобы он исчез, когда происходит событие mouseout для элемента ".page_item.page-item-2" И элемента #dropdown.

Вот мой код Jquery (который не полностью работает)

$(document).ready(function(){
$("#dropdown").css('display', 'none');
$(".page_item.page-item-2").hover(
            function() {
    $("#dropdown").fadeTo("fast", 1.0);

    });
    var s = $(".page_item.page-item-2").mouseout;
    var b = $("#dropdown").mouseout;
    if(s && b){
    $("#dropdown").fadeTo("fast", 0.0);
    }    
});

Я уверен, что есть простое решение этого. Пожалуйста помоги

Answer 1

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

<div class="page_item page-item-2">Hello</div>
<div id="dropdown">World</div>

<script type="text/javascript"
    src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
    $("#dropdown").css('display', 'none');
    function clear_timeout() {
        clearTimeout($("#dropdown").data('timeout'));
        $("#dropdown").fadeIn("fast");
    }
    function set_timeout() {
        var timeout = setTimeout(function(){
            $("#dropdown").fadeOut("fast");
            $("#dropdown").css('display', 'none');
        }, 100);
        $("#dropdown").data('timeout', timeout);
    }
    $(".page_item.page-item-2").mouseenter(clear_timeout);
    $("#dropdown").mouseenter(clear_timeout);
    $(".page_item.page-item-2").mouseout(set_timeout);
    $("#dropdown").mouseout(set_timeout);
    });
</script>

Answer 2

Почему бы это не сработало?

$(document).ready(function(){
    $("#dropdown").css('display', 'none');
    $(".page_item.page-item-2").mouseenter(function() {
        $("#dropdown").fadeTo("fast", 1.0);
    });
    $(".page_item.page-item-2").mouseout(function() {
        $("#dropdown").fadeTo("fast", 0.0);
    });
    $("#dropdown").mouseout(function() {
        $("#dropdown").fadeTo("fast", 0.0);
    });
});

РЕДАКТИРОВАТЬ: Поскольку спецификация изменилась (история нашей жизни?), Вот переделка моего решения. Если отношения между этими двумя элементами просты, как у родителя-ребенка, это было бы очень просто... Но если они дальние родственники, приведенный ниже код все равно должен работать. Мне это не очень нравится... но я думаю, что это должно сработать.

var mouseEnterCounter= 0; //allows FadeOuts when equal to zero
$(document).ready(function(){
    $("#dropdown").css('display', 'none');
    $(".page_item.page-item-2").mouseenter(function() {
        mouseEnterCounter++;
        $("#dropdown").fadeTo("fast", 1.0);
    });
    $("#dropdown").mouseenter(function() {
        mouseEnterCounter++;
    });
    $(".page_item.page-item-2").mouseout(function() {
        mouseEnterCounter--;
        if(mouseEnterCounter == 0)
            $("#dropdown").fadeTo("fast", 0.0);
    });
    $("#dropdown").mouseout(function() {
        mouseEnterCounter--;
        if(mouseEnterCounter == 0)
            $("#dropdown").fadeTo("fast", 0.0);
    });
});