jQuery后台左侧菜单导航切换子菜单

收藏

后台的左侧导航切换子菜单的效果，采用slide滑动效果。

0、请不要问“在不在”之类的问题，有问题直接问！1、学生或暂时没有工作的童鞋，整站资源免费下载！2、￥9.9充值终身VIP会员,加我微信，826096331 拉你进VIP群学习！3、程序员加油,技术改变世界。在线 充值

查看演示

加我微信，拉你进VIP群学习：

下载资源 下载积分： 30 积分

HTML

首先我们定义多个一级菜单和对应的二级菜单：

<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(); //当前所有二级菜单切换
        }
    });
})