第一個下拉菜單在懸停第二個菜單後沒有關閉

我在打開menu1下拉菜單時遇到了一些問題，並且在鼠標懸停菜單2後直接打開菜單而不關閉菜單1。如果我打開menu1並從nav中移出光標關閉下拉菜單，然後將鼠標懸停在menu2上，它就可以正常工作。如果我從菜單1直接進入菜單2或者相反，菜單2下拉菜單出現在菜單1下拉菜單下。我認爲我在我的html中有一個錯誤，或者它可以用jquery函數修復，但我不知道如何解決這個問題。我希望添加更多的菜單，其實只有兩個。我希望你明白我的問題，任何幫助，將不勝感激第一個下拉菜單在懸停第二個菜單後沒有關閉

$(document).ready(function() { 
    var menu = $('.menu') 
    menu.hide(); 
    $("#mainbutton").mouseenter(function(){ 
     $(".menu").stop().slideDown("fast"); 
    }); 
    $("#nav").mouseleave(function(){ 
     $(".menu").stop().slideUp("fast"); 
    }); 

    var menu2 = $('.menu2') 
    menu2.hide(); 
    $("#secondboutton").mouseenter(function(){ 
     $(".menu2").stop().slideDown("fast"); 
    }); 
    $("#nav").mouseleave(function(){ 
     $(".menu2").stop().slideUp("fast"); 
    }); 
});

Here the JSFiddle

來源

2015-09-05 colapsnux

我建議一般的類名添加到所有菜單.menu併爲每個單獨的菜單一個特定的選擇（#menu1或.menu1）以及活動狀態.active的指示符。這種方式可以簡單地關閉所有.menu.active

看到下面提琴概念的一個簡單證明： https://jsfiddle.net/ad3a5qyw/2/

編輯：我抽象的小提琴，所以你可以添加data-menu屬性的nav-items指示關聯的菜單。

來源

2015-09-05 01:14:54

它的完美就是這樣，非常感謝你，我真的很感謝:) – colapsnux

@colapsnux完美！如果一切看起來都很好，請將此問題標記爲已回答:) –

我明白是怎麼回事：

這很容易使用jQuery，你已經寫了，和這裏的代碼與新的菜單項爲例，說明它是多麼容易：https://jsfiddle.net/xyqoj24m/2/

什麼繼續的是mouseleave函數只在鼠標離開元素時才運行。所以需要做的是處理隱藏/顯示菜單，如下所示：

當鼠標懸停在菜單項上時，關閉所有其他下拉菜單並顯示正確的菜單項。
當鼠標離開下拉菜單或菜單項時，關閉下拉菜單。

看看這個的Javascript，看看這是什麼意思：

$("#mainbutton").mouseenter(function(){ 
     $(".menu").stop().slideDown("fast"); 
     $(".menu2").stop().slideUp("fast"); 
     $(".menu3").stop().slideUp("fast"); 
    }); 

    $("#secondbutton").mouseenter(function(){ 
     $(".menu2").stop().slideDown("fast"); 
     $(".menu").stop().slideUp("fast"); 
     $(".menu3").stop().slideUp("fast"); 
    }); 

    // leave the first menu dropdown 
    $("#mainbutton, .menu").mouseleave(function() { 
    $(".menu").stop().slideUp("fast"); 
    }); 

    // leave the second menu dropdown 
    $("#secondbutton, .menu2").mouseleave(function() { 
    $(".menu2").stop().slideUp("fast"); 
    });

隨意問的問題！

來源

2015-09-05 01:32:16 lintuxvi

非常感謝您，但是當我將光標移到下拉列表中時，slideUp發生並且菜單關閉。但頂級菜單切換很好，也許你可以修復它？再次感謝你 [** Fiddle **]（https://jsfiddle.net/xyqoj24m/2/） – colapsnux

第一個下拉菜單在懸停第二個菜單後沒有關閉

回答

相關問題