菜单伸缩Js控制

<div class="global_module procatalog">
<h3>产品分类</h3>
<ul class="m-treeview">
<li class="m-expanded">
<span>衬衫</span>
<ul>
<li><span>短袖衬衫</span></li>
<li><span>长袖衬衫</span></li>
</ul>
</li>
<li class="m-expanded">
<span>卫衣</span>
<ul>
<li ><span>开襟卫衣</span></li>
<li ><span>套头卫衣</span></li>
</ul>
</li>
<li class="m-expanded">
<span>裤子</span>
<ul>
<li><span>休闲裤</span></li>
<li><span>免烫卡其裤</span></li>
<li><span>牛仔裤</span></li>
<li><span>短裤</span></li>
</ul>
</li>
</ul>
<p class="module_up_down"><img src="images/down.gif" alt="" /></p>
</div>

 

<script>

/*产品树展开和关闭*/
$(function(){
$(".m-treeview > li > span").click(function(){ // 注意用的是 子选择器 ( > )
var $ul = $(this).siblings("ul");
if($ul.is(":visible")){
$(this).parent().attr("class","m-collapsed");
$ul.hide();
}else{
$(this).parent().attr("class","m-expanded");
$ul.show();
}
return false;
})
})

</script>

 

------------样式控制

 

/**产品分类样式**/
.procatalog .m-treeview{
background:#FFFFFF;
}
.procatalog .m-treeview li span {
cursor: pointer;
}
.procatalog .m-treeview li.m-expanded {
padding-left:16px;
background:url('../images/treeview-expanded.gif') no-repeat 0 0;
}
.procatalog .m-treeview li.m-expanded ul li {
list-style-image: url('../images/treeview-item.gif');
}
.procatalog .m-treeview li.m-collapsed {
padding-left:16px;
background:url('../images/treeview-collapsed.gif') no-repeat 0 0;
}
.procatalog .m-treeview li.m-collapsed ul{
display:none;
}