javascript - jQuery导航栏无法正常工作

我正在尝试用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上滑时...请帮助

最佳答案

发生这种情况是因为您在两个不同的元素上给出了hover事件。当调用一个元素的悬停事件时，它将显示菜单，当您尝试转到该菜单时，将触发其他元素的悬停，这会使菜单栏向上（向上滑动）。可见性，因此第二次触发div是可见的，从而使其向上滑动]

使用mouse enter和mouse leave事件
在鼠标上输入slideDown，在鼠标上离开slideUp
（并且，如果不需要在两个元素上进行事件传递，那么最好在一个元素上应用事件以防止闪烁效果[如果有的话]）

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

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

引用mouse enter和mouse leave事件

希望这能解决问题

关于javascript - jQuery导航栏无法正常工作，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/14911689/