使用插件来制做accordion，肯定是一个最简单的方法，对任何网站来说，安装的插件越多，网站的速度肯定也会越慢，并且大部分插件默认情况下会把js，css文件加载到网站的所有页面，插件用的多了，严重影响网站加载速度。
几行js代码就可以搞定一个accordion，代码如下：
<div class="cus_accordion">
<div class="cus_accordion_title" > Accordion 1 </div>
<div class="cus_accordion_content">
<div>content1</div>
</div>
<div class="cus_accordion_title" > Accordion 2 </div>
<div class="cus_accordion_content">
<div>content2</div>
</div>
</div>
<script>
var footer = document.getElementsByClassName("cus_accordion_title");
var j;
for (j = 0; j < footer.length; j++) {
footer[j].addEventListener("click", function() {
var accordion_content_set = this.nextElementSibling;
if (accordion_content_set.style.maxHeight) {
this.classList.remove("active");
accordion_content_set.style.maxHeight = null;
} else {
this.classList.add("active");
accordion_content_set.style.maxHeight = accordion_content_set.scrollHeight + "px";
}
});
}
</script>
<style>
.cus_accordion_title{
background-color:#eee;
line-height: 40px;
}
.cus_footer .cus_accordion{
margin-top: 20px;
}
.cus_accordion_content{
margin-bottom: 20px;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
background-color: aliceblue;
line-height: 40px;
}
.cus_accordion_title:before {
content: '\002B';
color: #000;
font-weight: bold;
font-size: 20px;
line-height: 20px;
}
.cus_accordion_title.active:before {
content: "\2212";
}
</style>
其中js代码是必须的，html源码根据自己的内容来修改，css样式根据自己的需要来调整。
用最少的js代码做出自己想要的accordion，提高网站的加载速度，YES！
代码使用class获取对应的accordion，也可以更改为ID来获取，不同的ID可以对应不同的accordion。
本站所有测试环境均使用ubuntu+lnmp
所有的测试、优化均基于lnmp进行，大部分方法均是相通的，仅仅因为是lnmp是一键安装，集成了大部分安装脚本，方法配置。
本人对于服务器，网站运行环境是十窍通了九窍，还有一窍不通，一桶不满，半桶晃荡，所以在配置上能偷懒的就偷懒，能省事的就省事，并且这些配置仅仅为自己配置过的记录，所有配置均自己在自己服务器上实现，并不一定通用所有配置环境，并且文章描述也可能不通顺，前言不搭后语，驴唇不对马嘴，请需要参照此文章配置的客观慎思而行，不保证你配置的时候一定可以成功。
此段落本站所有文章均有，作者已完成自我批评，只接受评论区指正，不再接受批评，谢谢。