首先我们定义多个一级菜单和对应的二级菜单:
<div class="menus_area" id="menus_area">
<div class="line"></div>
<dl class="system_log">
<dt>系统记录<img src="images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">充值记录</a></dd>
<dd><a href="#">短信充值记录</a></dd>
<dd><a href="#">消费记录</a></dd>
<dd><a href="#">操作记录</a></dd>
</dl>
<dl class="custom">
<dt>客户管理<img src="images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">客户管理</a></dd>
<dd><a href="#">试用/成交客户管理</a></dd>
<dd><a href="#">未成交客户管理</a></dd>
<dd><a href="#">即将到期客户管理</a></dd>
</dl>
<dl class="channel">
<dt>渠道管理<img src="images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">渠道主页</a></dd>
<dd><a href="#">渠道标准管理</a></dd>
<dd><a href="#">系统通知</a></dd>
<dd><a href="#">渠道商管理</a></dd>
<dd><a href="#">渠道商链接</a></dd>
</dl>
<dl class="app">
<dt>APP管理<img src="images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">App运营商管理</a></dd>
<dd><a href="#">开放接口管理</a></dd>
<dd><a href="#">接口类型管理</a></dd>
</dl>
<dl class="cloud">
<dt>大数据云平台<img src="images/left/select_xl01.png"></dt>
<dd class="first_dd"><a href="#">平台运营商管理</a></dd>
</dl>
......
</div> jQuery 切换菜单非常简单,请看到代码:
$(function() {
$("#menus_area").find("dt").click(function() { //一级菜单点击
if (!$(this).hasClass("on")) { //当前一级菜单不选中状态才切换
$("#menus_area").find("dt").removeClass("on"); //所有的一级菜单去除选中样式
$(this).addClass("on"); //当前一级菜单去除选中样式
$('dd').slideUp(); //所有二级菜单隐藏
$(this).nextAll('dd').slideToggle(); //当前所有二级菜单切换
}
});
})
*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
