jquery下拉菜单
Posted 看起来没睡醒
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jquery下拉菜单相关的知识，希望对你有一定的参考价值。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>左侧导航</title> <head> <style type="text/css"> body{margin:0;padding:0;overflow-x:hidden;} html, body{height:100%;} img{border:none;} *{font-family:‘微软雅黑‘;font-size:12px;color:#626262;} dl,dt,dd{display:block;margin:0;} a{text-decoration:none;} #bg{background-image:url(images/dotted.png);} .container{width:100%;height:100%;margin:auto;} /*left*/ .leftsidebar_box{width:160px;height:auto !important;overflow:visible !important;position:fixed;height:100% !important;background-color:#D7EBF9;} .line{height:2px;width:100%;background-image:url(images/line_bg.png);background-repeat:repeat-x;} .leftsidebar_box dt{padding-left:40px;color:#18A9EC;font-size:14px;line-height:48px;cursor:pointer;background: url(./images/select_xl01.png) no-repeat 136px center ;} .leftsidebar_box dt.on{background: url(./images/select_xl.png) no-repeat 136px center ;} .leftsidebar_box dd{background-color:#e6f2fb;padding-left:40px;display: none;padding-top: 5px;} .leftsidebar_box dd.on{background-color: #8AC4EF;} .leftsidebar_box dd.on a{color: #fff;} .leftsidebar_box dd a{color:#42BAF2;line-height:20px;} .leftsidebar_box dl dd:last-child{padding-bottom:5px;} </style> </head> <body id="bg"> <div class="container"> <div class="leftsidebar_box"> <div class="line"></div> <dl class="system_log"> <dt>系统记录</dt> <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>客户管理</dt> <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>渠道管理</dt> <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管理</dt> <dd><a href="#">App运营商管理</a></dd> <dd><a href="#">开放接口管理</a></dd> <dd><a href="#">接口类型管理</a></dd> </dl> <dl class="cloud"> <dt>大数据云平台</dt> <dd class="first_dd"><a href="#">平台运营商管理</a></dd> </dl> <dl class="syetem_management"> <dt>系统管理</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> <dd><a href="#">商城模板管理</a></dd> <dd><a href="#">微功能管理</a></dd> <dd><a href="#">修改用户密码</a></dd> </dl> <dl class="source"> <dt>素材库管理</dt> <dd><a href="#">图片库</a></dd> <dd><a href="#">链接库</a></dd> <dd><a href="#">推广管理</a></dd> </dl> <dl class="statistics"> <dt>统计分析</dt> <dd><a href="#">客户统计</a></dd> </dl> </div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript"> $(function(){ $(".leftsidebar_box dt").click(function(){ $(this).parent().find(‘dd‘).removeClass("menu_chioce"); $(".menu_chioce").slideUp(); $(".menu_chioce").parent().find("dt").removeClass("on"); $(this).parent().find(‘dd‘).slideToggle(); $(this).parent().find(‘dt‘).toggleClass("on"); $(this).parent().find(‘dd‘).addClass("menu_chioce"); }); $(".leftsidebar_box dd").click(function(){ $(".leftsidebar_box dd").removeClass("on"); $(this).addClass("on"); }) }) </script> </body> </html>
以上是关于jquery下拉菜单的主要内容，如果未能解决你的问题，请参考以下文章