jquery實現左側下拉選單列表
阿新 • • 發佈:2019-02-13
1、HTML部分
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>左側下拉選單列表示例</title> <link rel="stylesheet" type="text/css" href="css/style.css" /> </head> <body> <div class="container"> <div class="left_box"> <dl class="system_log"> <dt>系統記錄 <img src="images/select_xl01.png" /> </dt> <dd><a href="#">充值記錄</a></dd> <dd><a href="#">消費記錄</a></dd> <dd><a href="#">操作記錄</a></dd> </dl> <dl class="custom"> <dt>客戶管理 <img src="images/select_xl01.png" /> </dt> <dd><a href="#">成交客戶</a></dd> <dd><a href="#">未成交客戶</a></dd> <dd><a href="#">即將到期客戶</a></dd> </dl> <dl class="channel"> <dt>渠道管理 <img src="images/select_xl01.png" /> </dt> <dd><a href="#">渠道主頁</a></dd> <dd><a href="#">渠道標準</a></dd> <dd><a href="#">渠道商管理</a></dd> </dl> <dl class="system_management"> <dt>系統管理 <img src="images/select_xl01.png" /> </dt> <dd><a href="#">使用者管理</a></dd> <dd><a href="#">角色管理</a></dd> <dd><a href="#">欄目管理</a></dd> </dl> </div> <div class="right_box"></div> </div> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/main.js"></script> </body> </html>
2、CSS部分
body{ margin:0; padding:0; height:100%; } dl,dt,dd{ display: block; margin:0; } .container{ margin:0 auto; width:100%; height:100%; position:relative; } .left_box{ width: 160px; position: fixed; height: 100%; background-color: #3992d0; } .left_box dt { padding-left: 40px; padding-right: 10px; background-repeat: no-repeat; background-position: 10px center; color: #f5f5f5; font-size: 14px; position: relative; line-height: 48px; cursor: pointer; } .system_log dt{ background-image: url(../images/system.png); } .custom dt{ background-image: url(../images/custom.png); } .channel dt{ background-image: url(../images/channel.png); } .system_management dt{ background-image: url(../images/syetem_management.png); } .left_box dt img{ right:10px; top:20px; position:absolute; } .left_box dd{ background-color:#317eb4; padding-left:40px; } .left_box dd a{ color: #f5f5f5; line-height: 24px; font-size:12px; text-decoration: none; }
3、JS部分
$(function(){ $(".left_box dd").hide(); $(".left_box dt").click(function(){ $(".left_box dt").css({"background-color":"#3992d0"}); $(this).css({"background-color": "#317eb4"}); $(".left_box dt img").attr("src","images/select_xl01.png"); $(this).parent().find('img').attr("src","images/select_xl.png"); $(this).parent().find('dd').removeClass("menu_chioce"); $(".menu_chioce").slideUp(); $(this).parent().find('dd').slideToggle(); $(this).parent().find('dd').addClass("menu_chioce"); }) });
4、效果圖