0

目前有一个在悬停时激活的下拉菜单（在 CSS 中从 display:none 到 display:block）。似乎 CSS 在 Jquery 之前执行，但是，因为在第一次悬停时，下拉菜单没有动画（即它立即出现），但在第二次悬停时，Jquery 的向下滑动和向上滑动正确执行。为什么 Jquery 没有在第一次悬停时应用？我找到了一个解决方案，指出添加此行 |$('.nav ul li ul').css('display','block').slideUp(0);| 到 Jquery 解决了这个问题，但它不适合我......忍受我的冗余我正在学习这个。

这是菜单的 HTML：

<ul class="nav">
    <li><a href="#">...</a></li>
    <li><a href="#">Dropdown1</a>
        <ul>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </li>
    <li><a href="#">Dropdown2</a>
        <ul>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
            <li><a href="#">...</a></li>
        </ul>
    </li>
    <li><a href="#">...</a></li>
    <li><a href="#">...</a></li>
</ul>

我的 CSS：

.nav {
font-family: FrutigerLTStd-Roman, Trebuchet MS, Helvetica, Arial, sans-serif; 
font-size:16px; 
font-style: none; 
font-weight: normal; 
margin:0; 
list-style:none;
padding:0px 0px 0px 0px; 
z-index:600; 
text-align:center;
clear: both;
box-shadow: 0px 3px 3px 0px #888
background-clip: padding;
}
.nav a{
color:#FFF
background:#629ec4; 
display: block; 
font-weight: bold;
margin:0 0 0 0;
target-new:tab;
}
.nav li{ 
background:#629ec4;
margin:1px 0 1px 0;
border-top:0px solid;
border-right:0px solid;
border-bottom:0px solid;
z-index: 600;
float:left;
}
.nav li a:hover{
color:#0072bb;
}

.nav li ul{
list-style:none;
display:none;
position:relative;
z-index: 700;
background-color:#629ec4
}

.nav li:hover ul{
display:block;
border-top:2px solid;
}

.nav li:hover ul li {
clear:left;
}

.nav ul li:hover a{
color:#0072bb;
opacity: 1;
}

我的jQuery：

$(document).ready(function () {  
    $('.nav ul li ul').css('display','block').slideUp(0);
    $('.nav li').hover(
    function () {
        //show its submenu
        $('ul', this).slideDown(300);
    },
    function () {
        //hide its submenu
        $('ul', this).slideUp(300);        
    }
);
});
4

1 回答 1

0

我无法复制您描述的问题，但是，我进行了一些修改以尝试清除您描述的问题。

将类添加到下拉列表ul：

 <li><a href="#">Dropdown1</a>
     <ul class="dropdown">
    ...

更新的 CSS：

.nav { 
    font-family: FrutigerLTStd-Roman, Trebuchet MS, Helvetica, Arial, sans-serif;
    font-size:16px;
    font-style: none;
    font-weight: normal;
    margin:0;
    list-style:none; 
    padding:0px 0px 0px 0px;
    z-index:600;
    text-align:center; 
    clear: both; 
    box-shadow: 0px 3px 3px 0px #888;
    background-clip: padding; 
}
.nav a{ 
    color:#FFF; 
    background:#629ec4;
    display: block;
    font-weight: bold; 
    margin:0 0 0 0; 
    target-new:tab; 
}
.nav li{
    background:#629ec4; 
    margin:1px 0 1px 0; 
    border-top:0px solid; 
    border-right:0px solid; 
    border-bottom:0px solid; 
    z-index: 600; 
    float:left; 
}

.nav li a {
    padding: 0 15px 0 15px;   
}

.nav li a:hover{ 
    background:#0072bb; 
    color: #fff;    
}
.nav li:hover .dropdown { 
    display:block; 
    border-top:1px solid; 
}
.dropdown { 
    list-style:none; 
    display:none; 
    position:relative; 
    z-index: 700; 
    background-color:#629ec4;  
}
.dropdown li {
    clear: both; 
    display: block;
    width: 100%;
}
.dropdown li:hover a{ 
    background:#0072bb; 
    color: #fff;
    opacity: 1; 
}

工作解决方案（出于说明目的稍作修改）：JSFIDDLE

于 2012-06-27T19:13:44.027 回答