【div+css+js实现一个下拉导航栏的功能】

首先设计页面的基本布局
设计div里面的样式
设计js脚本

1.设计基本的div页面样式

<%-- nav start --%>
<section class="wrapper">
<div class="header">用户信息</div>
<div class="nav">
    <ul>
        <li class="nav-list">
            
            <h2><span class="icon-yonghuxinxi iconfont"></span>个人信息
                <i></i>
            </h2>
            <div class="hide_content">
                <a href><h5>用户返利提现</h5></a>
                <a href><h5>下级返利提现</h5></a>
            </div>
        </li>
        <li class="nav-list">
            <h2><span class="icon-tx iconfont"></span>提现申请<i></i></h2>
            <div class="hide_content">
                <a href><h5>用户返利提现</h5></a>
                <a href><h5>下级返利提现</h5></a>
            </div>
        </li>
        <li class="nav-list">
            <h2><span class="icon-icon iconfont"></span>阿里监控<i></i></h2>
            <div class="hide_content">
                <a href><h5>重登监控</h5></a>
                <a href><h5>订单监控</h5></a>
            </div>
        </li>
        <li class="nav-list">
            <h2><span class="icon-icon- iconfont"></span>订单明细<i></i></h2>
            <div class="hide_content">
                <a href><h5>返现订单</h5></a>
               <a href> <h5>金额详细</h5></a>
            </div>
        </li>
        <li class="nav-list">
            <h2><span class="icon-caiwu iconfont"></span>财务中心<i></i></h2>
            <div class="hide_content">
                <a href><h5>返现订单</h5></a>
                <a href><h5>金额详细</h5></a>
            </div>
        </li>
    </ul>
</div>

2.进行样式的设计

/*清楚标签自带的样式*/
*,h2,a,li,p,b,span,h5{
    padding: 0px;
    margin: 0px;
    list-style: none;
    text-decoration: none !important;
}
html, body {
    height:100%;
}
.wrapper {
    width: 220px;
    background-color:#2f4050;
    height: 1200px;
    position: fixed;
}
/*导航栏内容编写*/
.header {
    width:100%;
    height:170px;
    background:url(../image/header-profile.png) no-repeat;
}
.nav {
    width:220px;
}

.nav-list > h2 {
    position: relative; /*定义绝对定位不会改变布局*/
    font-size: 15px;
    color: #a7b1c2;
    padding: 15px 0px 15px 10px;
    transition: ls; /*颜色过度*/
}
    .nav-list > h2.on {
        background-color: #293846;
        border-left: 5px solid #19AA8D;
        color:#fff;
        font-weight:700;
    }
    .nav-list > h2:hover {
        background-color: #293846;
        color: #fff;
        font-weight: 700;
    }
.nav-list h2 > span {
    color: #a7b1c2;
    font-size: 20px;
    padding-left:10px;
    padding-right:8px;
}
.nav-list h2> i{
    /*设计三角形标标*/
    position:absolute;
    top:16px;
    right:10px;
    border:5px solid transparent;
    border-left-color:#fff;
    transform:rotate(0deg); /*css3中旋转变化属性*/
    transform-origin:1px 6px; /*调整变化基点，避免位置偏移*/ 
    transition:ls;
} 
/*直接把要改变的样式操作，写在css中然后结合js做是否显示的操作,使用类名的方式来转化，给它添加一个叫做这个的类名*/
.nav-list i.on {
    transform: rotate(90deg);
}
.hide_content > a > h5 {
    text-align: center;
    padding: 15px 0px;
    background-color: #293846;
    width: 100%;
    color: #a7b1c2;
    border-left: 5px solid #19AA8D;
}
.hide_content > a:hover > h5 {
    color:#fff;
    font-weight:700;
}
.hide_content {
    height: 0px;
    overflow: hidden;
    transition: ls;
}


/*导航内容编写结束*/

需要注意的是：

1.transition: ls; /*颜色过度*/
2./*直接把要改变的样式操作，写在css中然后结合js做是否显示的操作,使用类名的方式来转化，给它添加一个叫做这个的类名*/
3.transform:rotate(0deg); /*css3中旋转变化属性*/
4.transform-origin:1px 6px; /*调整变化基点，避免位置偏移*/ 

进行js的设计编写：对点击事件基本几个步骤：

一.编写点击事件监控
	1.js中获取点击元素  >> document.querySelectorAll
	2.js中控制鼠标点击事件 >>onclick
	3.js中设置css的属性 >> aListI[this.index].className
二.清空上一次操作
	1.清除上一次的样式
	2.设置当前样式
	三、点击自己的时候收回
	1.定义一个开关使用：true,flase

 <script>
/*
    一.编写点击事件监控
        1.js中获取点击元素  >> document.querySelectorAll
        2.js中控制鼠标点击事件 >>onclick
        3.js中设置css的属性 >> aListI[this.index].className
    二.清空上一次操作
        1.清除上一次的样式
        2.设置当前样式
    三、点击自己的时候收回
        1.定义一个开关使用：true,flase
 */
var aList = document.querySelectorAll('.nav-list h2'); //获取所有的nav-list h2控件内容
var aHide = document.querySelectorAll(".hide_content");
var aListI = document.querySelectorAll('.nav-list h2 >i');
var lastIndex = 0;
for (var i = 0; i < aList.length; i++)
{
    aList[i].index = i; //自定义保存下标
    aList[i].isCilck = false;
    aList[i].onclick = function () {//鼠标点击事件
        //如果已经展开则收回
            //清除上一次样式
            aHide[lastIndex].style.height = "0px";
            aList[lastIndex].className = "";
            aListI[lastIndex].className = ""; //实现角标转动
        if (this.isCilck) {
            this.isCilck = false; //还原未被点击状态
        } else {
            
            //点击修改样式
            aHide[this.index].style.height = "90px";
            aList[this.index].className = "on";
            aListI[this.index].className = "on"; //实现角标转动
            aList[lastIndex].isCilck = false; //清除上一次开关状态
            this.isCilck = true; //记录点击
            lastIndex = this.index; //记录上一次点击角标
        }
    }
}
</script>

最后实现效果：