Jquery Mouseout 下拉菜单

Question

我正在尝试修复我的 mouseout 事件。

我得到了元素

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

当我悬停在它上面时显示。 但我希望它在“.page_item.page-item-2”元素和 #dropdown 元素上出现 mouseout 事件时消失。

这是我的 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

为什么这不起作用？

$(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);
    });
});

Answer 2

您可以在 mouseout 事件中设置超时以在一段时间后淡出元素。并在每次发生 mouseenter 事件时重置超时。这是一个完整的最小示例。

<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>