最新赞助活动温馨提示:9.9元终身VIP,学生和没有工作的整站资源免费下载!
头像

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

来源:http://www.erdangjiade.com/ 二当家的 2015-05-29 06:54浏览(2032)

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

1、请不要问“在不在”之类的问题,有问题直接问!2、学生或暂时没有工作的童鞋,整站资源免费下载!3、¥9.9充值终身VIP会员,整站资源无任何限制下载!5、程序员加油,交流群:782128964 在线 充值

jQuery后台左侧菜单导航切换子菜单
分类:导航菜单 > 图标导航 难易:初级
查看演示 下载资源: 137

关注微信号获取此Demo视频教程:

下载资源 下载积分: 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(); //当前所有二级菜单切换
        }
    });
})
声明:本文为原创文章,如需转载,请注明来源erdangjiade.com并保留原文链接:https://www.erdangjiade.com/js/135.html
评论3
头像

友情提示:垃圾评论一律封号 最新福利:领取阿里云限量2000通用代金券

  • 头像 板凳
    05-17 21:00
    yinuo
    案例里面功能都点不出来
  • 头像 椅子
    01-03 15:10
    阿涛来此学习
    0200161013
  • 头像 沙发
    11-25 09:01
    ngu137
    很不错的特效啊啊
1 2