手风琴效果——原生JS

写在前面

作为一只前端小汪，以自己一个初学者的视角，在这里记录自己在学习过程中遇到的问题，解决的方法，也算是成长的历程吧！过程中难免会有疏忽和自己没有发现的错误，如果你碰巧看到了我的博客，欢迎和我一起交流、学习，给我提出宝贵的意见。

我的QQ群号：495086635，需要学习资源的欢迎进群，我自己的资源无偿提供给大家。

酷炫的手风琴效果

手风琴效果的特点：每次只展开一个元素，其他的兄弟元素都闭合

先从样式和布局开始，做一个原生JS的手风琴效果

html：

<div class="c">
    <p class="red">1</p>
    <p class="blue">2</p>
    <p class="green">3</p>
    <p class="yellow">4</p>
</div>

 css：

.c{
    background-color: black;
}
.c::before,.c::after{
    content: '';
    display: table;
}
.c::after{
    clear: both;
}
.red{
    width: 100px;
    background-color:red;
    float: left;
    height: 300px;
}

.blue{
    background-color:blue;
}
.green{
    background-color: green;
}
.yellow{
    background-color: yellow;
}
.yellow,.green,.blue{
    width: 20px;
    float: left;
    height: 300px;
}

效果如图：

写完结构和样式，对JS要完成的效果进行拆解

需求分析：当鼠标点击一个元素时，对应元素的宽度变大，兄弟元素中宽度最大的元素宽度变小

实践：

1.首先，手风琴