<div class="accordion">
            <ul class="music">
                <li class="grand grand1"></li>
                <li class="grand grand2"></li>
                <li class="grand grand3"></li>
                <li class="grand grand4"></li>                         
            </ul>
      </div>

*{
    margin: 0;
    padding: 0;
}
html{
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body{
    width: 100%;
    height: 100%;
}
/* 1.初始化网页的margin和padding为0.一般在布局前都会这样
   2.html和body的宽度高度都为100%，因为在html网页它是从下往上找的 
   也可以写成html，body{样式}这样的一个简写 
*/
li {
    list-style-type: none;
}
/* 这里是给li无需列表的一个公共样式的一个清楚样式。ol和ul前面都会有1，2，3
   的样式ul也有·的一个样式，这里就是清楚前面的数字和点的一个作用 
*/
.accordion{
    width: 100%;
    height: 100%;
    background: #555050;
    position: absolute;
    left: 0%;
    top: 0px;
}
/* 给最外围div一个样式背景颜色，让它脱离文档流和规定位置 */
.music{
    width: 100%;
    height: 100%;
    position: absolute;
    left:15%;
    transform: skew(-20deg); 
}
   /* ul也是一样的，给它一个样式，我为了觉得好看一点 让它倾斜了20度 */
.grand{
    transition: .3s;
    width: 18%;
    height: 100%;
    float: left;
}
/* 这个是公共类名的一个样式，让它浮动往左边，加上一个过渡效果 */
.grand1{
    background: #64EEE2;
    /* position: absolute; */
}
.grand2{
    background: #9A62B4;
}
.grand3{
    background: #65EE77;
}
.grand4{
    background: #E65467;
    /* position: absolute; */
}
/* 这里就是为我们的手风琴添加上自己喜欢的颜色啦 */

var grand = document.getElementsByClassName("grand");
//获取到li的class集合数
// console.log(grand.length)
//这里就可以在页面后台查看到li的长度为4。


     for(var i = 0;i<grand.length; i++){ 
         //  循环一个变量I   这样就可以获取到我li的所有集合的下标
        grand[i].index = i;  
        //把循环变量赋值给[i]
        grand[i].onmouseover=function(){
            //  把li长度的数组套入一个鼠标移入时的操作函数里面
            var j = this.index;
                //  index函数是返回表或区域中的值或对值的引用。
                //  函数index()有两种形式：数组形式和引用形式
                //  数组形式通常返回数值或数值数组；引用形式通常返回引用。
                //  所以变量个这个 J 就是为了获取到当前这个函数引用的效果。
            grand[j].style.width="25%"  
            grand[j].style.transition = ".3s";
            // 鼠标移入到每一个li的时候所改变的样式
        }
    //鼠标移入的时候改变节点的宽度,也可以改变节点的高度 并且加上过渡效果


         grand[i].onmouseout=function(){ 
             // 鼠标离开节点的函数引用
             var k = this.index
            grand[k].style.width="18%"
            grand[k].style.transition = ".3s";
            //这里主要就是为了在鼠标移入改变样式后 鼠标离开节点重置回本来的样式
         }

    //  这里主要是鼠标离开节点的时候重新重置节点的原本宽度  不然的话就一直是25%的宽度 而不会还原