下拉菜單編碼-鼠標懸停

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/