一.按照慣例,先上DOM結構
<p id="menu">
<ul>
<li>
<a href="#nogo">主菜單一</a>
<ul>
<li><a href="http://usual.blog.51cto.com">子菜單一</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單一</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單一</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單一</a></li>
</ul>
</li>
<li>
<a href="#nogo">主菜單二</a>
<ul>
<li><a href="http://usual.blog.51cto.com">子菜單二</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單二</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單二</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單二</a></li>
</ul>
</li>
<li>
<a href="#nogo">主菜單三</a>
<ul>
<li><a href="http://usual.blog.51cto.com">子菜單三</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單三</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單三</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單三</a></li>
</ul>
</li>
<li>
<a href="#nogo">主菜單四</a>
<ul>
<li><a href="http://usual.blog.51cto.com">子菜單四</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單四</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單四</a></li>
<li><a href="http://usual.blog.51cto.com">子菜單四</a></li>
</ul>
</li>
</ul>
</p>
二.有瞭DOM結構,再確定樣式
#menu{
font-family:Helvetica;
}
#menu ul{
list-style:none;
margin:0px;
padding:0px;
width:250px;
}
#menu ul li{
margin:1px 0px;
padding:0px;
}
#menu ul li a{
height:30px;
line-height:30px;
padding-left:10px;
display:block;
text-decoration:none;
font-weight:bold;
color:#333;
font-size:16px;
border:1px solid #ccc;
}
#menu ul li a:Hover{
background:#a0b4dc;
}
#menu ul li li a{
border:none;
height:25px;
line-height:25px;
}
#menu ul li li a:hover{
background:yellow;
}
#menu ul li ul{
display:none;
}
三.然後就是最重要的JQUERY部分瞭
(function($){
$.fn.slideMenu=function(){
return this.each(function(){
var menu=$(this);
menu.find("ul li>a").bind("click",function(event){
var currentLink=$(event.currentTarget);
if(currentLink.parent().find("ul.active").size()==1){ //如果被點擊的連接的子菜單已經顯示瞭,就隱藏該子菜單
hide(currentLink);
}
else if(menu.find("ul li ul.active").size()==0){ //如果所有的子菜單都沒有顯示,則顯示點擊的子菜單
show(currentLink);
}
else{ //顯示點擊的子菜單,隱藏已顯示的子菜單
menu.find("ul li ul.active").slideUp("medium",function(){
menu.find("ul li ul").removeClass("active");
show(currentLink);
});
}
});
var show=function(currentLink){ //顯示子菜單方法
currentLink.parent().find("ul").addClass("active");
currentLink.parent().find("ul").slideDown("medium");
}
var hide=function(currentLink){ //隱藏子菜單方法
currentLink.parent().find("ul").removeClass("active");
currentLink.parent().find("ul").slideUp("medium");
}
});
}
})(jQuery);
四.引用。
$(document).ready(function(){
$("#menu").slideMenu();
})
作者“前端攻城——usual”