Question

我正在尝试使用slideDown和slideUp函数编写一个简单的jQuery下拉导航，但它似乎无法正常工作，请在下面找到css和js代码：< / p>

.programsnav ul li{
    float:left;
    margin-left:120px;
    display:block;
    position:relative;
    cursor:pointer;
    padding-bottom:5px;
}
.programsnav ul li:hover{
    border-bottom:dashed 1px #fcfe93;
}
.programsnav ul li span{
    display:none;
    position:absolute;
    width:930px;
    top:42px;
    left:-371px;
    background:#fcfe93;
    color:#161527;
    padding:10px 15px 15px 15px;
}
.programsnav ul li span a{
    display:inline-block;
    padding:0 10px;
    border-right:dotted 1px #161527;
    color:inherit;
    font-size:12px;
    text-transform:uppercase;
}

JS

$(document).ready(function(){
     $('#downloadnav li').hover(function() {
            $('span', this).slideDown(100);
        }, function () {
            $('span', this).slideUp(100);       
     });
});

HTML

<ul id="downloadnav">
<li>Movies<span><a href="#">Movie1</a><a href="#">Movie2</a></span></li>
<li>Songs<span><a href="#">Song1</a><a href="#">Song2</a></span></li>
<li>Games<span><a href="#">Game1</a><a href="#">Game2</a></span></li>
</ul>

如果我在span＆gt; a上鼠标悬停，它会保持动画效果，请帮助，谢谢。

Answer 1

说实话，这段代码有几个问题。对于初学者来说，这个标记不利于下拉菜单导航。通常那些遵循这个惯例：

<ul id="downloadNav">
    <li>Movies
        <ul>
            <li><a href="#">Movie 1</a></li>
            <li><a href="#">Movie 2</a></li>
        </ul>
    </li>
    <li>Songs
        <ul>
            <li><a href="#">Song 1</a></li>
            <li><a href="#">Song 2</a></li>
        </ul>
    </li>
    <li>Games
        <ul>
            <li><a href="#">Game 1</a></li>
            <li><a href="#">Game 2</a></li>
        </ul>
    </li>
</ul>

此外，样式的元素偏向右侧，而不是“下拉”。我冒昧地做了一个快速的例子，希望你能够研究它，以便更好地理解这个问题的更明智的方法。

小提琴：http://jsfiddle.net/LRBqJ/1/

Answer 2

使用 jQuery 1.7.2

的JavaScript

$(document).ready(function(){
     $('#downloadnav li').hover(function() {
            $('span', this).stop().slideDown(100);
        }, function () {
            $('span', this).stop().slideUp(100);       
     });
});

CSS

ul#downloadnav {
    position: relative;
}
ul#downloadnav  li{
    float:left;
    margin-left:120px;
    display:block;
    position:relative;
    cursor:pointer;
    padding-bottom:5px;
}
ul#downloadnav  li:hover{
    border-bottom:dashed 1px #fcfe93;
}
ul#downloadnav  li span{
    display:none;
    position:absolute;
    width:930px;
    top:0px;
    margin-top: 41px;
    left:-371px;
    background:#fcfe93;
    color:#161527;
    padding:10px 15px 15px 15px;
}
ul#downloadnav  li span {
        display: none;
}
ul#downloadnav  li span a{
    display:none;
    padding:0 10px;
    border-right:dotted 1px #161527;
    color:inherit;
    font-size:12px;
    text-transform:uppercase;
}

HTML

<ul id="downloadnav">
<li>Movies<span><a href="#">Movie1</a><a href="#">Movie2</a></span></li>
<li>Songs<span><a href="#">Song1</a><a href="#">Song2</a></span></li>
<li>Games<span><a href="#">Game1</a><a href="#">Game2</a></span></li>
</ul>

在我的FF中工作正常

Here 是工作演示。

jquery简单的下拉内容问题

2 个答案:

的JavaScript

CSS

HTML