[英]how improve this sample of side menu with jquery?
我有這個html代碼的簡單側面菜單:
<div id="menu">
<div>
Menu Title
</div>
<ul class="menu">
<li>
<span>
first item
</span>
<ul>
<li>
sub item
</li>
<li>
sub item
</li>
<li>
sub item
</li>
</ul>
</li>
<li>
<span>
second item
</span>
<ul>
<li>sub menu</li>
<li>sub menu</li>
</ul>
</li>
<li>
<span>
third item
</span>
<ul>
<li>
sub menu
</li>
<li>
sub menu
</li>
</ul>
</li>
</ul>
</div>
和CSS是:
#menu{
text-align:center;
font-size:13px;
font-family:tahoma;
color:#0000AA;
padding:2px 0;}
#menu div{
color:#0000AA;}
#menu ul{
text-align:right;
background-color: #FFFFFF;
list-style-type: none;
margin: 0px;
padding: 0px;}
#menu ul li{
display:block;
margin: 3px 2px;
cursor:hand;
cursor:pointer;}
#menu ul li span{
width:100%;
display:block;
background-color:#DDDDFF;}
#menu ul li span:hover{
background-color:#9999EE;}
#menu ul li ul{
display:none;}
#menu ul li ul li{
background-color:#EEEEEE;
margin:2px;
display: block;}
#menu ul li ul li:hover{
background-color:#FFFFFF;}
.submenu{
background-color: #CCCCFF;}
和jQuery的代碼是:
$(window).load(function(){
$(".submenu").children(this).slideUp("slow");
});
$(document).ready(function(){
$('ul.menu li span').click(function(){
$("ul.menu li").find('ul').slideUp('fast');
$(this).parent(this).find('ul').slideDown('fast');
});
});
而我的complate菜單位於http://jsfiddle.net/parseha/NkuG5/3/中,這個問題是:單擊第一個項目時,子菜單先滑后滑,我不想這樣做。
請原諒我這段文字和我的內容錯誤。 謝謝。
使用“兄弟姐妹”選擇器,slideToggle()將根據其當前狀態顯示或隱藏DOM。
$(window).load(function(){
$(".submenu").children(this).slideUp("slow");
});
$(document).ready(function(){
$('ul.menu li span').click(function(){
$(this).siblings('ul').slideToggle('fast');
});
});
訣竅是跟蹤哪個菜單已展開,並根據其狀態(展開或折疊)確定要采取的操作(向上或向下滑動)。
您可以通過在菜單項展開時將其添加到菜單項中,並在其折疊時移除該類來實現此目的。 該類的存在將指示菜單是展開還是折疊。
jQuery代碼:
$(window).load(function() {
$(".submenu").children(this).slideUp("slow");
});
$(document).ready(function() {
$('ul.menu li span').click(function() {
if ($(this).hasClass('current'))
{
$(this).removeClass('current');
$("ul.menu li").find('ul').slideUp('fast');
}
else
{
$(this).addClass('current');
$(this).parent(this).find('ul').slideDown('fast');
}
});
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.