首页 > 代码库 > jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果
jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果
html:
<div class="col-sm-3 col-md-2 sidebar"> <div class="totalt"><a>系统管理系统</a></div> <ul class="menu"> <li class="title"> <a class="item item1"><span class="glyphicon glyphicon-chevron-down myarrow "></span>账号管理 </a> <ul class="content"> <li> <a class="item item2" href=http://www.mamicode.com/"right5.html" target="right" ><span class="glyphicon glyphicon-step-backward "></span>账号管理 </a> </li> <li> <a class="item item2" href=http://www.mamicode.com/"right.html" target="right"><span class="glyphicon glyphicon-step-backward "></span>账号管理 </a></li> <li> <a class="item item2" href=http://www.mamicode.com/"right2.html" target="right"><span class="glyphicon glyphicon-step-backward "></span>账号管理 </a></li> </ul> </li> <li class="title "> <a class=" item item1"><span class="glyphicon glyphicon-chevron-down myarrow "></span>账号管理 </a> <ul class="content"> <li> <a class="item item2" href=http://www.mamicode.com/"#" ><span class="glyphicon glyphicon-step-backward "></span>账号管理 </a> </li> <li> <a class="item item2" href=http://www.mamicode.com/"#"><span class="glyphicon glyphicon-step-backward "></span>账号管理 </a></li> <li> <a class="item item2" href=http://www.mamicode.com/"#"><span class="glyphicon glyphicon-step-backward "></span>账号管理 </a></li> </ul> </li> <li class="title"> <a class="item item1"><span class="glyphicon glyphicon-chevron-down myarrow "></span>账号管理 </a> <ul class="content"> <li> <a class="item item2" href=http://www.mamicode.com/"#" > <span class="glyphicon glyphicon-step-backward "></span>账号管理 </a> </li> <li> <a class="item item2" href=http://www.mamicode.com/"#" ><span class="glyphicon glyphicon-step-backward "></span>账号管理 </a></li> <li> <a class="item item2" href=http://www.mamicode.com/"#" ><span class="glyphicon glyphicon-step-backward "></span>账号管理 </a></li> </ul> </li> </ul> </div>
js:
$(".title .item1").click(function(){ $(this).next(".content").slideToggle();//实现二级菜单的展开收缩功能 $(this).find("span").toggleClass("glyphicon glyphicon-chevron-down");//实现菜单点击时图标的转换效果 $(this).find("span").toggleClass("glyphicon glyphicon-chevron-right"); })
css就不贴了,用jquery实现这种竖直手风琴菜单真的容易好多。
jquery实现后台系统左侧菜单的点击展开/收缩二级菜单效果
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。