<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>左侧下拉菜单</title> <style> *{ margin: 0; padding: 0; } html,body{ height: 100%; } .wrap{ width: 260px; height: 100%; background-color: #363a45; } .head{ width: 260px; height: 60px; background-color: #44495a; line-height: 60px; text-align: center; color: #fff; font-size: 20px; } .nav{ width: 250px; margin: 10px 5px; } .nav-list h2{ position: relative; width: 100%; height: 50px; background-color: #3889d4; line-height: 50px; text-align: center; color: #fff; font-size: 15px; transform: 0.5s; /* css3过渡效果 */ } .nav-list h2.on{ background-color: #393c4a; } .nav-list{ margin-bottom: 5px; } .nav-list i{ position: absolute; right: 10px; top: 16px; border: 8px solid transparent; border-left-color: #fff; transform-origin: 1px 7px; /* 变换的中心点 */ transform: rotate(0deg); /* css3变换属性 旋转 */ transition: 0.5s; } .nav-list i.on{ transform: rotate(90deg); } .hide{ overflow: hidden; height: 0; transform: 0.5s; /* css3过渡效果 */ } .hide a{ display: block; padding: 10px 0; background-color: #282c3a; border-bottom: 1px solid #42495d; color: #fff; text-align: center; } </style> </head> <body> <div class="wrap"> <div class="head">我是医师</div> <div class="nav"> <ul> <li class="nav-list"> <h2> <i></i> 师承收徒 </h2> <div class="hide"> <a href="#">远程诊疗</a> <a href="#">师承直播</a> <a href="#">我的弟子</a> <a href="#">问答解惑</a> <a href="#">师承管理</a> <a href="#">收徒设置</a> </div> </li> <li class="nav-list"> <h2> <i></i> 健康好货 </h2> <div class="hide"> <a href="#">我的商品</a> <a href="#">我的订单</a> </div> </li> </ul> </div> </div> <script> var aList = document.querySelectorAll('.nav-list h2'); var aHide = document.querySelectorAll('.hide'); var aIcon = document.querySelectorAll('.nav-list i'); var lastIndex = 0; //保存上一次的下标 for (var i = 0; i < aList.length; i++) { aList[i].index = i; //自定义属性保存下标 aList[i].isClick = false; //初始没有被点击 aList[i].onclick = function(){ //点击事件执行函数 //清除上一次的样式 lastIndex上一次的下标 aHide[lastIndex].style.height = '0'; aList[lastIndex].className = ''; //变换颜色 aIcon[lastIndex].className = ''; //改变小图标的角度 if (this.isClick) { //被点击了 this.isClick = false; }else{ //没有被点击 //设置当前样式 this.index 当前的下标 aHide[this.index].style.height = '245px'; //设置css属性 变换hide的高度 aList[this.index].className = 'on'; //变换颜色 aIcon[this.index].className = 'on'; //改变小图标的角度 //保存上一次下标 aList[lastIndex].isClick = false; this.isClick = true; lastIndex = this.index; //保存上一次的样式 }; } }; </script> </body> </html>
