0

我正在使用 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();
});
4

2 回答 2

2

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

  1. 离开导航标题或内容时创建超时。
  2. 作为回报，如果您将鼠标悬停在内容上，则必须清除超时，以免它隐藏。
$(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在这里。

于 2013-06-11T19:55:48.483 回答
1

这是我想出的，但你需要重新排列你的元素。navContent 需要是 navHeader 的孩子所以这可能对你有用也可能不适合你，因为你可能在这个意义上受到限制......

但在这里....

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

注意CSS，你需要补偿标题元素的高度，不管它有多高.....这样菜单就在下面。

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

于 2013-06-11T19:52:10.970 回答