简易树形菜单(可伸缩)

.paren{
　　border: 1px solid;
　　color: gray;
　　width: 100px;
　　font: bold;
}
.tool{
　　background-color: purple;
　　color: white;
　　padding-left: 5px;
　　border: 2px solid;
　　border-color: white;
　　font-size: 15px;
　　line-height: 20px;
}
.tool.current{
　　font-style: inherit;
　　font-weight: bold;
　　color:yellow;
}
.lev2 a{
　　padding-left: 20px;
　　line-height: 27px;
　　z-index: 2px;
}
.lev2{
　　background:#ececec;
}

 

//js块

$(function(){

　　　　//默认隐藏下拉列表

　　　　$(".lev1 > a").removeClass("current").next().hide();


$(".lev1 > a").click(function(){

　　$(this).addClass("current").next().show().parent().siblings().children("a").removeClass("current").next().hide();

　　return false;
})

 

 

<div class="paren">
<ul>
<li class="lev1">
<a href="#" class="tool" title="这是唯品会的衬衫..爱买不买">小家电</a>
<ul class="lev2">    
<li><a href="#">格兰仕</a></li>
<li><a href="#">阿尔族</a></li>
<li><a href="#">森马</a></li>
</ul>
</li>
<li class="lev1">
<a href="#" class="tool" title="这是聚美优品的羊毛衫..爱买不买">羊毛衫</a>
<ul class="lev2">
<li><a href="#">羊毛衫1</a></li>
<li><a href="#">羊毛衫2</a></li>
<li><a href="#">羊毛衫3</a></li>
</ul>
</li>
<li class="lev1">
<a href="#" class="tool" title="这是聚美优品的羽绒服..爱买不买">羽绒服</a>
<ul class="lev2">
<li><a href="#">羽绒服1</a></li>
<li><a href="#">羽绒服2</a></li>
<li><a href="#">羽绒服3</a></li>
</ul>
</li>
</ul> 
</div>

 

转载于:https://www.cnblogs.com/haohao111/p/5144494.html