jQuery導航欄無法正常工作

Question

我正在嘗試用HTML制作導航類型的東西，並且為此添加了以下代碼HTML

<div id="sign-wrap">    <div  id="click-box" class="welcome">    
    <p class="welcome" id="name">Welcome Mr. X</p>    </div>    <div id="dropdown">
       <ul>
            <li><a href="/">Insight Pro</a></li>
            <li><p>Mobiles</p></li>
            <li><p>Cameras</p></li>
            <li><p>Laptops</p></li>
            <li><p>Settings</p></li>
            <li><p>Logout</p></li>
       </ul>    </div> </div>

JQ：

$("#name, #click-box").hover(function(){
    if ($('#dropdown').is(":visible")) {
       $('#dropdown').slideUp(1000);
    }
    else{
        $('#dropdown').slideDown(1000);
    }
});

當我將鼠標懸停在X先生#dropdown時#dropdown滑下，但是當我將鼠標移到#dropdown滑下時...

Answer 1

發生這種情況是因為您已經在兩個不同的元素上提供了hover事件。 當調用一個元素的懸停事件時，它將顯示菜單，當您嘗試轉到該菜單時，將觸發其他元素的懸停，這將使菜單欄向上（向上滑動） 。可見性，因此第二次觸發div是可見的，從而使其向上滑動]

使用mouse enter和mouse leave事件
在鼠標上輸入slideDown，在鼠標上離開slideUp
（並且，如果不需要在兩個元素上進行事件傳遞，則最好在一個元素上應用事件以防止閃爍效果[如果有的話] ）

$("#name, #click-box").mouseenter(function(){
       $('#dropdown').slideDown(1000);
});

$("#name, #click-box").mouseleave(function(){
       $('#dropdown').slideUp(1000);
});

引用鼠標進入和鼠標離開事件

希望這能解決問題

Answer 2

用這個...

var hovered = false;

$("#name, #click-box").on('hover', function(e){
        $('#dropdown').slideDown(1000);
});

$("#options").on('hover', function(e){
        hovered = true;
});

$("#dropdown").on('mouseleave', function(e){
        hovered = false;
});

$("#sign-wrap").on('mouseleave', function(e){
    if(!hovered){
        $('#dropdown').slideUp(1000);
    }
});

並查看此jSfiddle示例。

Answer 3

在click-box元素上使用click事件可能會使您的用戶更輕松地單擊菜單項。 例如，您可以使用以下代碼段

$("#click-box").click(function () { $("#dropdown").slideToggle("slow"); });

希望這對您有所幫助。