Question

我正在使用JQuery使用slideToggle函数显示隐藏的Div。这工作正常，但我想在鼠标悬停在它上方时保持Div可见。

我已经搜索了很多，我认为我需要在添加类时做一些事情，但我今天才开始使用JQuery而且我无法理解它。非常感谢任何帮助，我确信我写的不是最有效的方法。

由于

HTML

<div id="wrapper">
    <div id="header">
        <div id="logo"></div>
        <div id="navHeader"></div>
    </div>
    <div id="navContent" style="display:none;"></div>
    <div id="totalContent"></div>
</div>

JQuery的

<script>
$(document).ready(function () {
    $("#navHeader").mouseover(function () {
        $("#navContent").slideToggle(1000);
    });
    $("#navHeader").mouseout(function () {
        $("#navContent").slideToggle(1000);
    });
});    
</script>

我尝试添加它并玩它以保持div可见，但它不起作用。

$("#navContent").hover(function(){
    $("#navContent").show();
});

Answer 1

如果您不想将内容移动到子位置，可以执行以下操作：

离开导航标题或内容时创建超时。
作为回报，如果将鼠标悬停在内容上，则必须清除超时，以免隐藏。

$(document).ready(function () {
    var hoverTimeout;

    $("#navHeader").mouseover(function () {
        if (hoverTimeout) {
            clearTimeout(hoverTimeout);
        }
        $("#navContent").slideToggle(1000);
    });

    $("#navContent").mouseover(function () {
        if (hoverTimeout) {
            clearTimeout(hoverTimeout);
        }
    });

    $("#navHeader, #navContent").mouseout(function () {
        hoverTimeout = setTimeout(function () {
            $("#navContent").slideToggle(1000);
        }, 500);
    });
});

jsFiddle here.

Answer 2

这就是我提出的，但你需要重新安排你的元素。 navContent需要是navHeader的子代因此，这可能适用于您，也可能不适合您，因为您可能会受到限制......

但在这里......

       $('#navHeader').hover(function() {
        $(this).find('#navContent').slideToggle(); });

注意CSS也是如此，你需要补偿标题元素的高度，不管它是多高.....所以菜单在下面。

http://jsfiddle.net/8xdV3/1/

JQuery - 使用外部触发器在悬停时保持div可见

2 个答案: