<!DOCTYPE html>
<html lang="en">
<head>
???<meta charset="UTF-8">
???<meta name="viewport" content="width=device-width, initial-scale=1.0">
???<meta http-equiv="X-UA-Compatible" content="ie=edge">
???<title>手风琴</title>
???<style>
???????* {
???????????margin: 0;
???????????padding: 0;
???????}
???????ul li {
???????????list-style: none;
???????????text-align: center;
???????}
???????li {
???????????width: 150px;
???????????height: 30px;
???????????line-height: 30px;
???????????cursor: pointer;
???????????border-bottom: 1px solid #fff;
???????}
???????li h3 {
???????????border-bottom: 1px solid #fff;
???????}
???????.wrap {
???????????width: 200px;
???????}
???????.wrap .subContent {
???????????color: #fff;
???????????background: #008b8b;
???????????overflow: hidden;
???????????transition: all 2s ease 2s;
???????}
???????.details li {
???????????background: #333;
???????}
???</style>
???<script>
???????window.onload = function() {
???????????function p(arg) {
???????????????console.log(arg);
???????????}
???????????let content = document.querySelector(‘.content‘),
???????????????subContent = content.querySelectorAll(‘.subContent‘),
???????????????details = content.querySelectorAll(‘.details‘);
???????????function ss() {
???????????????for (let i = 0; i < subContent.length; i++) {
???????????????????subContent[i].style.height = ‘30px‘;
???????????????????(function(q) {
???????????????????????subContent[q].addEventListener(‘click‘, function(ev) {
???????????????????????????var e = ev || window.event;
???????????????????????????e.stopPropagation();
???????????????????????????e.preventDefault();
???????????????????????????ss();
???????????????????????????detailsLi = details[i].querySelectorAll(‘li‘);
???????????????????????????this.style.height = 30 * (detailsLi.length + 1) + (detailsLi.length) + ‘px‘;
???????????????????????}, false);
???????????????????})(i)
???????????????}
???????????}
???????????ss();
???????}
???</script>
</head>
<body>
???<div class="wrap">
???????<ul class="content">
???????????<li class="subContent">
???????????????<h3>我是标题</h3>
???????????????<ul class="details">
???????????????????<li>我是内容</li>
???????????????????<li>我是内容</li>
???????????????????<li>我是内容</li>
???????????????????<li>我是内容</li>
???????????????????<li>我是内容</li>
???????????????????<li>我是内容</li>
???????????????</ul>
???????????</li>
???????????<li class="subContent">
???????????????<h3>我是标题1</h3>
???????????????<ul class="details">
???????????????????<li>我是内容1</li>
???????????????????<li>我是内容</li>
???????????????????<li>我是内容</li>
???????????????????<li>我是内容</li>
???????????????</ul>
???????????</li>
???????????<li class="subContent">
???????????????<h3>我是标题2</h3>
???????????????<ul class="details">
???????????????????<li>我是内容2</li>
???????????????????<li>我是内容</li>
???????????????????<li>我是内容</li>
???????????????????<li>我是内容</li>
???????????????</ul>
???????????</li>
???????</ul>
???</div>
</body>
</html>
js ?实现手风琴
原文地址：https://www.cnblogs.com/qiaoxinming/p/8397510.html