1

I'm trying to code a simple jQuery drop down nav using slideDown and slideUp function, but it doesn't seem to be working properly, please find the css and js code below:

.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>

Its keeps animating if i do mouseover on span>a, please help, thanks.

4

2 回答 2

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/

于 2012-05-21T15:09:10.583 回答
0

使用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 中工作正常

这是工作演示。

于 2012-05-21T15:00:13.387 回答