原生js实现手风琴效果原生js实现手风琴效果

在实际网页开发中，手风琴出现频率也居高。
简单地做了一个手风琴，但觉得它的过渡效果没实现，内容列表出现得很突兀，效果图如下：

文章图片

文章图片

实现代码如下：

手风琴 - 锐客网body,ul {padding: 0; margin: 0; }li {list-style: none; }.nav {width: 150px; height: 310px; margin-top: 30px; margin-left: 50px; font-size: 20px; border: 1px solid #ccc; }.nav>ul>li:nth-child(2n+1) {background-color: cadetblue; }.nav>ul>li:nth-child(2n+2) {height: 160px; display: none; transition: all 1s; }.nav>ul>#selected {background-color: rgb(46, 115, 117); }.nav>ul>li:nth-child(2) {display: block; }
标题1
1
2
3
4
标题2
1
2
3
4
标题3
1
2
3
4
标题4
1
2
3
4
标题5
1
2
3
4
标题6
1
2
3
4