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

来源:https://www.sucaihuo.com/js/135.html 2015-05-29 06:54浏览(5436) 收藏

后台的左侧导航切换子菜单的效果,采用slide滑动效果。
jQuery后台左侧菜单导航切换子菜单
分类:导航菜单 > 图标导航 难易:初级
查看演示 下载资源 下载积分: 20 积分

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

系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791

1 2