Question

我正在尝试编辑的代码段。

我的网站有一个链接导航下拉菜单，但默认设置是通过鼠标点击激活它，而不是像我希望的那样在鼠标悬停时起作用。

以下是JS代码的片段 - 有人建议更改以允许鼠标悬停来操作下拉列表吗？

编辑 - 我已添加＆＃34; hover＆＃34;而不是＆＃34;点击＆＃34;但它不起作用......

谢谢！

$("#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/

下拉菜单编码 - 鼠标悬停

2 个答案: