Question

目前有一个在悬停时激活的下拉菜单（从display：none到display：CSS中的块）。看起来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);        
    }
);
});

Answer 1

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

在下拉列表中添加了课程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

下拉菜单动画仅适用于第二个悬停？

1 个答案: