僅在第二次懸停時應用下拉菜單動畫？

目前有一個下拉菜單在懸停時被激活（從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);   
    } 
); 
});

來源

2012-06-27 Alex

到您的網頁或相關代碼的鏈接會有幫助 – Rodolfo

我無法複製您所描述的問題，然而，，我做了一些修改，試圖清除你描述的問題。

添加類到下拉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-27 19:13:44 RobB

僅在第二次懸停時應用下拉菜單動畫？

回答

相關問題