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>JS实现手风琴效果
原文地址：https://www.cnblogs.com/weblife/p/10266094.html