下拉菜单编码-鼠标悬停

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/