jQuery导航栏无法正常工作

Question

I am trying to make a navigation type of thing, in HTML and i've added following code for it 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);
    }
});

when I hover at Mr. X #dropdown slides down but when I take my mouse to #dropdown slides up... please help

Answer 1

This happens because you have given hover event on two different elements. When one elements' hover event is invoked then it shows the menu and when you try to go to that menu the other elements' hover is fired which takes your menu bar up (slide up) [You are doing the slide up and down based on the visibility, so for the second firing the div is visible which makes it slide up]

Use mouse enter and mouse leave events
On mouse enter slideDown and on mouse leave slideUp
(And if it's not required to give event on two elements then preferably apply event on one element to prevent flickering effect [if any] )

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

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

Refer mouse enter and mouse leave events

Hope this solves the issue

Answer 2

Use this...

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);
    }
});

And see this jSfiddle example.

Answer 3

Using a click event on the click-box element may make it a little easier for your users to click the menu items. For example you could use the following snippet

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

Hope this helps you some.