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>