Javascript 在jQuery中创建向下滑动子菜单的最有效方法

我试图制作一个子菜单，当鼠标悬停在某个元素上时，它会从主菜单栏滑下。我目前正在使用以下代码执行此操作：

$（文档）.ready（函数（）{
$（'.navlist li a'）.hover（函数（）{
if（$（this）.attr（'data param'）==“parent”）
{
$（'#subnavbar-'+$（this.attr（'dataslug'））.slideDown（200）；
}
}，函数（）{
if（$（this）.attr（'data param'）==“parent”）
{
var name='#subnavbar-'+$（this.attr（'data slug'）；
setTimeout（函数（）{
如果（！$（名称）.is（':hover'））
{
$（名称）.slideUp（200）；
}
}, 200 );
}
});
});
a{
颜色：白色；
}
navbar先生{
背景颜色：绿色；
页边距底部：0；
高度：30px；
}
导航列表{
列表样式：无；
文本缩进：0；
保证金：0；
填充：0；
浮动：左；
}
ul.navlistli{
显示：块；
宽度：100px；
浮动：左；
}
.subnavbar{
背景颜色：蓝色；
边际上限：0；
高度：20px；
显示：无；
}
保险单{
列表样式：无；
文本缩进：0；
保证金：0；
填充：0；
浮动：左；
}
美国保险商协会{
显示：块；
宽度：80px；
浮动：左；
}











有效的解决方案是只使用CSS。绝对不需要JQUERY！试试这个

HTML:

正如你告诉我的，我已经为你做了一个快速的

当然，你需要改进风格，但“工作”是存在的

css只是：

    .container {
    height:30px;
    background-color:green;
    color:#fff;
}
.container > ul {position:relative;}
.container > ul li {
    display:inline-block;
    margin-right:30px;
}
.container > ul >li > ul {
    position:absolute;
    left:0;
    background-color:blue;
    top:0px;
    z-index:-1;       
}
.container > ul > li:hover > ul {
    top:30px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

编辑：我改变了aproach，而不是用我刚刚使用的顶部高度来制作过渡。查看它
要解决您的第一个问题，我建议使用jQuery插件Hover Intent。顾名思义，这提供了一种简单的方法来确定用户是否打算将鼠标悬停在该元素上，并通过多次快速将鼠标悬停在该元素内或外来避免对动画进行垃圾邮件处理

要解决第二个问题，如果可能，可以在navbar和subnavbar周围添加包含元素，并在离开包含元素时使用该元素关闭subnavbar（如果subnavbar恰好可见）

HTML:

记住也要包含用于悬停意图的脚本。
如果我没记错的话，您需要使用stopPropagation（），尽管我不确定是否必须使用jquery？这可以很容易地做到，只要css@AlvaroMenéndez不，使用jQuery绝对不是必须的；我想我更喜欢CSS解决方案！虽然这是一个很酷的解决方案；这不是我要找的，因为我希望向下滑动的
subnavbar
替换它下面的元素；而不是像在你的解决方案中那样坐在所有东西的顶端，并有下拉列表。谢谢你！如果我理解正确，您需要子菜单的上/下滑动？？是的，这是正确的；但整个条（宽度：100%）需要上/下滑动，替换条下的元素以获得解决方案！然而；出于某种原因，在这个解决方案中，如果您将鼠标悬停在子菜单上，它会再次下降并发生变化？文本也出现了破损（我使用的是Chrome41）？您可以在这里看到一个屏幕截图（），这很好，但是有没有办法让它取代下面的HTML元素呢？如果在其下方放置一个div，子菜单将被遮挡，更改
z-index
只会将它们放在顶部，而JavaScript方法实际上会替换下面的元素？
nav {
    margin: 100px auto;
    text-align: center;
}
nav ul ul {
    display: none;
}
nav ul li:hover > ul {
    display: block;
}
nav ul {
    background: -moz-linear-gradient(center top , #efefef 0%, #bbbbbb 100%) repeat scroll 0 0 rgba(0, 0, 0, 0);
    border-radius: 10px;
    box-shadow: 0 0 9px rgba(0, 0, 0, 0.15);
    display: inline-table;
    list-style: outside none none;
    padding: 0 10px;
    position: relative;
}
nav ul::after {
    clear: both;
    content: "";
    display: block;
}
nav ul li {
    float: left;
}
nav ul li:hover {
    background: -moz-linear-gradient(center top , #4f5964 0%, #5f6975 40%) repeat scroll 0 0 rgba(0, 0, 0, 0);
}
nav ul li:hover a {
    color: #fff;
}
nav ul li a {
    color: #757575;
    display: block;
    padding: 15px 20px;
    text-decoration: none;
}
nav ul ul {
    background: none repeat scroll 0 0 #5f6975;
    border-radius: 0;
    padding: 0;
    position: absolute;
    top: 100%;
}
nav ul ul li {
    border-bottom: 1px solid #575f6a;
    border-top: 1px solid #6b727c;
    float: none;
    position: relative;
}
nav ul ul li a {
    color: #fff;
    padding: 5px 10px;
}
nav ul ul li a:hover {
    background: none repeat scroll 0 0 #4b545f;
}
nav ul ul ul {
    left: 100%;
    position: absolute;
    top: 0;
}

    .container {
    height:30px;
    background-color:green;
    color:#fff;
}
.container > ul {position:relative;}
.container > ul li {
    display:inline-block;
    margin-right:30px;
}
.container > ul >li > ul {
    position:absolute;
    left:0;
    background-color:blue;
    top:0px;
    z-index:-1;       
}
.container > ul > li:hover > ul {
    top:30px;
    -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
    -ms-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    transition: all 0.4s ease;
}

<div id="containing_element">
   <div class="navbar">
      <ul class="navlist">
         <li><a href="#">Item 1</a></li>
         <li><a href="#" id="hoverlink">Hover Here</a></li>
         <li><a href="#">Item 3</a></li>
      </ul>
   </div>
   <div class="subnavbar" id="subnavbar-test">
      <ul class="subnavlist">
         <li><a href="#">Subitem 1</a></li>
         <li><a href="#">Subitem 2</a></li>
         <li><a href="#">Subitem 3</a></li>
      </ul>
   </div>
</div>

$(document).ready( function() {
    function hoverEnter() {
        $('#subnavbar-test').slideDown(200);
    }
    $('#hoverlink').hoverIntent( hoverEnter );
    $('#containing_element').mouseleave(function () {
        if($('#subnavbar-test').is(':visible')) {
            $('#subnavbar-test').slideUp(200);
        }               
    });
});