JS实现手风琴效果，这个主要是点击时内容节点或者你想要的一个节点隐藏或显示，但是高度要为0；所以考虑用display或者height属性值切换，不能用opacity或者visibility属性来确定

 

1 <!doctype html>
 2 <html>
 3   <head>
 4     <meta charset="utf-8">
 5     <title>JS手风琴效果</title>
 6     <style>
 7       button.accordion {
 8     background-color: #eee;
 9     color: #444;
10     cursor: pointer;
11     padding: 18px;
12     width: 100%;
13     border: none;
14     text-align: left;
15     outline: none;
16     font-size: 15px;
17     transition: 0.4s;
18 }
19 
20 button.accordion.active, button.accordion:hover {
21     background-color: #ddd;
22 }
23 
24 button.accordion:after {
25     content: '\002B';
26     color: #777;
27     font-weight: bold;
28     float: right;
29     margin-left: 5px;
30 }
31 
32 button.accordion.active:after {
33     content: "\2212";
34 }
35 
36 .conten{
37     padding: 0 18px;
38     background-color: white;
39     display:none;
40     transition: display 0.2s ease-out;
41 }
42     </style>
43   </head>
44   <body>
45     <div class="container">
46       <!--手风琴效果，带响应图标-->
47       <div>
48         <button class="accordion">选项卡</button>
49         <p class="conten">
50           一条Listing卖不动，固然会有产品方面的因素，但也一定有卖家自身的因素。但很多时候我们往往无法自知，可能知道自己的长处，但未必能够清晰了解自己的不足，应用在对产品的把握上，我们首先要接受卖得好的Listing有较大概率是比我们做的更好这个前提，然后，去分析和学习，并把观察到的内容应用在自己的运营上，只有学习竞品的优秀Listing，才能缩小我们和竞品之间的差距，差距减小了，说不定就可以扭转颓势。
51         </p>
52       </div>
53       <div>
54         <button class="accordion">选项卡</button>
55         <p class="conten">
56           一条Listing卖不动，固然会有产品方面的因素，但也一定有卖家自身的因素。但很多时候我们往往无法自知，可能知道自己的长处，但未必能够清晰了解自己的不足，应用在对产品的把握上，我们首先要接受卖得好的Listing有较大概率是比我们做的更好这个前提，然后，去分析和学习，并把观察到的内容应用在自己的运营上，只有学习竞品的优秀Listing，才能缩小我们和竞品之间的差距，差距减小了，说不定就可以扭转颓势。
57         </p>
58       </div>
59       <div>
60         <button class="accordion">选项卡</button>
61         <p class="conten">
62           一条Listing卖不动，固然会有产品方面的因素，但也一定有卖家自身的因素。但很多时候我们往往无法自知，可能知道自己的长处，但未必能够清晰了解自己的不足，应用在对产品的把握上，我们首先要接受卖得好的Listing有较大概率是比我们做的更好这个前提，然后，去分析和学习，并把观察到的内容应用在自己的运营上，只有学习竞品的优秀Listing，才能缩小我们和竞品之间的差距，差距减小了，说不定就可以扭转颓势。
63         </p>
64       </div>
65       <div>
66         <button class="accordion">选项卡</button>
67         <p class="conten">
68           一条Listing卖不动，固然会有产品方面的因素，但也一定有卖家自身的因素。但很多时候我们往往无法自知，可能知道自己的长处，但未必能够清晰了解自己的不足，应用在对产品的把握上，我们首先要接受卖得好的Listing有较大概率是比我们做的更好这个前提，然后，去分析和学习，并把观察到的内容应用在自己的运营上，只有学习竞品的优秀Listing，才能缩小我们和竞品之间的差距，差距减小了，说不定就可以扭转颓势。
69         </p>
70       </div>
71       <div>
72         <button class="accordion">选项卡</button>
73         <p class="conten">
74           一条Listing卖不动，固然会有产品方面的因素，但也一定有卖家自身的因素。但很多时候我们往往无法自知，可能知道自己的长处，但未必能够清晰了解自己的不足，应用在对产品的把握上，我们首先要接受卖得好的Listing有较大概率是比我们做的更好这个前提，然后，去分析和学习，并把观察到的内容应用在自己的运营上，只有学习竞品的优秀Listing，才能缩小我们和竞品之间的差距，差距减小了，说不定就可以扭转颓势。
75         </p>
76       </div>
77 
78     </div>
79     <script>
80             var acc = document.getElementsByClassName("accordion");
81 
82 //为每个选项卡绑定切换事件
83 for(var i=0;i<acc.length;i++){
84   acc[i].οnclick=function(){
85     this.classList.toggle("active");
86     //然后把下一个内容内给隐藏切换=》可以高度直接变成0也可以display属性设置
87     conten=this.nextElementSibling;//要获取内容部分，兄弟及节点选择
88     if(conten.style.display=="none"){
89       conten.style.display ="block"
90     }else{
91        conten.style.display ="none"
92     }
93   }}
94     </script>
95   </body>
96 </html>