jQuery菜单toggleS滑动悬停？

我有一个菜单，其中只有一个项目有一个子列表。下面是HTML代码：jQuery菜单toggleS滑动悬停？

<div id="menu"> 
<ul> 
    <li><a href="index.html">Home</a></li> 
    <li><a href="#">Products</a></li> 
    <li><a href="#">About</a> 
     <ul> 
      <li><a href="#">Example One</a></li> 
      <li><a href="#">Example Two</a></li> 
      <li><a href="#">Example Three</a></li> 
     </ul> 
    </li> 
</ul> 
</div>

我想slideDown菜单，留在，当鼠标在菜单或子菜单上。所以下面的工作很好，但我希望悬停而不是点击相同的东西。

$('#menu ul li').click(function() { 
    $('#menu ul li ul').slideToggle('slow', function() { 

    }); 
});

我试图用悬停但它是非常错误，这里是代码太：

$("#menu ul li").hover(
    function() { 
    $("#menu ul li ul").slideDown('slow'); 
    }, 
    function() { 
    $("#menu ul li ul").slideUp('slow'); 
    } 
);

我试过slideDown后添加.stop(true, true)或$("#menu ul li ul").css("display", "block");但它仍然是马车。

CSS

#menu ul { 
    list-style: none; 
} 
#menu ul li { 
    display: block; 
    float: left; 
    padding: 0; 
    margin: 0 30px; 
} 
#menu ul li a { 
    color: #8b4513; 
    text-decoration: none; 
    font-size: 16px; 
} 
#menu ul li a:hover { 
    text-decoration: underline; 
} 
#menu ul li a img { 
    position: relative; 
    top: 2px; 
    left: -4px; 
} 
#menu ul li ul { 
    position: absolute; 
    width: 151px; 
    height: 90px; 
    top: 59px; 
    left: 300px; 
    padding: 10px 0 0 0; 
    background: url(gfx/submenu.png) no-repeat; 
    z-index: 1; 
} 
#menu ul li ul li { 
    height: 27px; 
    float: none; 
    margin: 0 25px; 
}

来源

2011-11-22 MatthewK

你的意思就像这个网站上的人正在做他的通讯和音频菜单项？ http://stackoverflow.com/questions/6539835/jquery-menu-slide-up-from-from-from-bottom-of-screen-on-hover –

嗯，也许，这有点类似。我检查它。 – MatthewK

@MthetheK请标记答案bro ... – Wazzzy

检查it out live

HTML

<div id="menu"> 
<ul> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">Products</a></li> 
    <li><a href="#">About</a> 
     <ul> 
      <li><a href="#">Example One</a></li> 
      <li><a href="#">Example Two</a></li> 
      <li><a href="#">Example Three</a></li> 
     </ul> 
    </li> 
</ul> 
</div>

jQuery的

$("#menu ul li").hover(
    function() { 
    $(this).children("ul").stop(true,true).slideDown('slow'); 
    }, 
    function() { 
    $(this).children("ul").stop(true,true).slideUp('slow'); 
    } 
);

来源

2011-11-22 14:28:15 Wazzzy

我添加了CSS，因为我认为这里有一个bug。我尝试了你的代码http://jsfiddle.net/vanJA/8/，但是当鼠标在子菜单上时闪烁！ – MatthewK

@MatthewK尝试从mouseout（即从.slideUp（'slow'）'）中移除'.stop（true，true）'并将'.stop（true，true）'保留为'.slideDown（'slow'） “......这就是你需要的......试试看...... – Wazzzy

这真的帮了我。谢谢！ – Ina

悬停是每次触发在元件鼠标移动。使用进入/离开，而不是：

$("#menu ul li").mouseenter(
    function() { 
    $("#menu ul li ul").slideDown('slow'); 
    } 
); 
$("#menu ul li").mouseleave(
    function() { 
    $("#menu ul li ul").slideUp('slow'); 
    } 
);

来源

2011-11-22 14:24:07 solendil

小提琴演示：http://jsfiddle.net/ZMLyz/

$('#menu ul li').mouseenter(function() { 
    $(this).find('ul').slideDown('slow'); 
}); 

$('#menu ul li').mouseleave(function() { 
    $(this).find('ul').slideUp('slow'); 
});

来源

2011-11-22 14:28:00

jQuery菜单toggleS滑动悬停？

回答

相关问题