js 实现手风琴

<!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>