在同一導航欄中有兩個下拉菜單

Question

正如我在問題標題中所說的，我創建了一個帶有兩個下拉框的導航欄。問題是，當我試圖用懸停打開一個菜單時（它只能用一個下拉框完美工作），第二個菜單同時打開。這是我創建的腳本。任何建議都會非常高興地被接受！

<script> 
$(document).ready(function() { 
    $(".dropdown").hover(
     function() { 
    $("ul.dropdown-menu").slideDown("medium").stop(true,true); 
     }, 
     function() { 
    $("ul.dropdown-menu").slideUp("medium").stop(true,true); 
     } 
    ); 
}); 
</script> 

Answer 1

這是因爲$("ul.dropdown-menu")是所有ul元素是CLASSE dropdown-menu的一個jQuery對象表示。這同樣適用於$(".dropdown")。

您可以使用each()來解決此問題。

遍歷一個jQuery對象，爲每個匹配的 元素執行一個函數。

在回調函數，使用$(this)訪問每個jQuery對象和:eq得到的$("ul.dropdown-menu")第n對象（它是基於0的這樣的第一個目的是:eq(0)）。 。

var a =0; 
$(".dropdown").each(function(){ 
    var b = a; 
    $(this).hover(function() { 
     $("ul.dropdown-menu:eq("+b+")").slideDown("medium").stop(true,true); 
    }, function() { 
     $("ul.dropdown-menu:eq("+b+")").slideUp("medium").stop(true,true); 
    }); 
    a++; 
}); 

Answer 2

提供ID每個下拉菜單，這樣

$("#firstDropdown").hover(); 
$("#secDropdown").hover();