下拉菜单编码-鼠标悬停

Question

我有一个要编辑的代码段。

我的网站上有一个链接导航下拉菜单，但默认设置是在单击鼠标时将其激活，而不是在我希望的鼠标悬停时起作用。

以下是JS代码的片段-是否有人建议进行更改以允许鼠标悬停来操作下拉菜单？

编辑-我添加了“悬停”而不是“点击”，但是它不起作用...

谢谢！

$("#nav .navbar-nav > li .dropdown-toggle").click(function () {    
    $(this).parent().toggleClass("open-nav")    
});

Answer 1

您是否尝试过.mouseover（）而不是.click（）？

http://api.jquery.com/mouseover/

Answer 2

我不确定为什么您无法使hover()工作。 我知道它工作正常。

这是一个基本菜单，看起来可能与您的菜单相似：

<div class="menu">Menu
    <div class="nav">
        <div class="link">Link 1</div>
        <div class="link">Link 2</div>
        <div class="link">Link 3</div>
        <div class="link">Link 4</div>
    </div>
</div>

将nav类设置为不显示在页面加载中，然后将光标变成指针，如下所示：

.nav {
    display: none;
}

.menu {
    cursor: pointer;
}

然后，您的jQuery函数应如下所示：

$('.menu').hover(function() {
    $('.nav').slideDown(500);
}, function() {
    $('.nav').slideUp(500);
});

注意用于hover()的两个参数，一个用于鼠标进入，一个用于鼠标离开。

它正在起作用 ： http : //jsfiddle.net/Xse4L/4/