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向上滑动时...请帮助

Answer 1

这是因为您在两个不同的元素上发出了hover事件。当一个元素＆＃39;调用悬停事件，然后显示菜单，当您尝试转到该菜单时，其他元素将被显示。悬停被触发，它会使您的菜单栏向上（向上滑动） [您正在根据可见性向上和向下滑动，因此对于第二次触发，可以看到div使其向上滑动] < / p>

使用mouse enter和mouse leave事件
在鼠标上输入slideDown和鼠标离开slideUp
（如果它不需要在两个元素上给出事件，那么最好在一个元素上应用事件以防止闪烁效果 [if any] ）

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

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

参考mouse enter和mouse leave事件

希望这能解决问题

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

请参阅this jSfiddle example.

Answer 3

在点击框元素上使用点击事件可以让用户更轻松地点击菜单项。例如，您可以使用以下代码段

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

希望这对你有所帮助。

Jquery导航栏无法正常工作

3 个答案: