JS实现手风琴效果
Posted 给自己一个梦
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了JS实现手风琴效果相关的知识，希望对你有一定的参考价值。
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: ‘ 02B‘; 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实现手风琴效果的主要内容，如果未能解决你的问题，请参考以下文章