首先:
     先看看手风琴是什么样子的考虑一下如何实现手风琴的效果,
接下来:
     我们来说一下手风琴的实现原理:
       1.有自己配置好的一对标签div和span
       2.点击一对div时,显示span
       3.将其他的div中的span标签隐藏,只显示点击时的div中的span
       4.看到这里恭喜你已经了解了手风琴的具体操作啦,我们来看看实际代码吧

手风琴目录:

1.图片演示

2.jQuery方式及实现原理

实现原理:
    jquery的实现方式:首先先获取到点击元素的this,将点击的this对象的兄弟级下拉,其他的兄弟级收回

 
标题1
我是弹出来的div1
标题2
我是弹出来的div2
标题3
我是弹出来的div3
标题4
我是弹出来的div4
 

3.原生js的实现原理及代码

实现原理:
    点击那个父级元素让那个父级元素的第一个子级元素显示,其他的隐藏.

 
标题1
我是弹出来的div1
标题2
我是弹出来的div2
标题3
我是弹出来的div3
标题4
我是弹出来的div4