标签：on() addclass att 中心 bsp span 二级菜单 logs image
CSS:
.qsc_nav_main .level1 { text-align: center; height: auto; } .qsc_nav_main .level1 a { display: inline-block; font-size: 16px; height: 45px; color: #fff; } .qsc_nav_main .level2 { display: none; } .qsc_nav_main .level2 li { text-align: center; height: 45px; color: #999; }
HTML:
<div class="qsc_company_nav"> <ul class="qsc_nav_main"> <li class="level1"> <a href="javascript:;" class="current">首页</a> </li> <li class="level1"> <a href="javascript:;">合作企业管理</a> <ul class="level2"> <li>供应商</li> <li>采购商</li> </ul> </li> <li class="level1"> <a href="javascript:;">账款管理</a> <ul class="level2"> <li>应收账款</li> <li>应付账款</li> <li>账款确认</li> </ul> </li> <li class="level1"> <a href="javascript:;">借款管理</a> <ul class="level2"> <li>借款</li> <li>还款</li> </ul> </li> <li class="level1"> <a href="javascript:;">我的中心</a> <ul class="level2"> <li>我的中心</li> <li>三方协议查询</li> <li>借款协议查询</li> </ul> </li> <li class="level1"> <a href="javascript:;">账户管理</a> </li> </ul> </div>
JS:
/*二级菜单 显示一个二级菜单时其他的隐藏，再次点击已显示的二级菜单时，该二级菜单隐藏*/
$(".level1 > a").click(function(){
var iclass = $(this).attr("class");
if (iclass=="current"){
$(this).next().hide().prev("a").removeClass("current");
}else {
$(this).addClass("current").next().show()
.parent().siblings()
.children("a").removeClass("current").next().hide();
return false;}
});
第二种方法：可同时显示多个二级菜单，点击显示/隐藏 $(function(){ $(".level1 > a").click(function(){ $(this).next().toggle(800,function(){ //TODO }); }); }); // $(function(){ // $(".level1 > a").click(function(){ // $(this).next().slideToggle(800,function(){ //滑动 // //TODO // }); // }); // });
标签：on() addclass att 中心 bsp span 二级菜单 logs image
原文地址：http://www.cnblogs.com/wei-dong/p/7473031.html
