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].onclick=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>