0

現在、ホバーでアクティブ化されるドロップダウン メニューがあります (CSS の display:none から display:block まで)。CSS は Jquery の前に実行されるように見えますが、最初のホバーではドロップダウン メニューがアニメーション化されず (つまり、瞬時に表示されます)、2 回目のホバーでは 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 に答える