0

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

4

3 回答 3

0

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

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

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

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

参考鼠标进入和鼠标离开事件

希望这能解决问题

于 2013-02-16T15:35:12.010 回答
0

在单击框元素上使用单击事件可能会使您的用户更容易单击菜单项。例如，您可以使用以下代码段

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

希望这对您有所帮助。

于 2013-02-16T16:04:07.537 回答
0

用这个...

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 示例。

于 2013-02-16T15:44:58.460 回答