背景：帮后台做的一个下拉效果，原来的在手机上点击反应很慢，而且没必要加载那么多js，索性就用原生js实现了。
这是折叠的状态。
这是展开状态，中间有个拉开过度的效果，同一时间只能有一个展开。
点击查看效果
html代码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
@charset "utf-8";
body {
margin: 0;
padding: 0
}
body {
font-family: "PingFang-SC-Bold", "Helvetica Neue", Helvetica, Arial, "PingFang SC Regular", "Hiragino Sans GB", "Heiti SC", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
overflow-x: hidden;
line-height: 1.5;
font-size: 15px;
color: #333;
}
img {
font-size: 0;
line-height: 0;
border: 0;
vertical-align: middle
}
* {
outline: 0;
-webkit-tap-highlight-color: transparent;
-webkit-tap-highlight-color: transparent;
box-sizing: border-box;
}
.head {
color: #333;
background-color: #f5f5f5;
border-color: #ddd;
padding: 10px 15px;
border-bottom: 0;
cursor: pointer;
}
.head img {
float: right;
width: 14px;
margin-top: 6px;
}
.item {
margin-bottom: 0;
border-radius: 4px;
background-color: #fff;
border: 1px solid transparent;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: 0 1px 1px rgba(0, 0, 0, .05);
border-color: #ddd;
}
.item+.item {
margin-top: 5px;
}
.ctx .p1 {
font-weight: 700;
}
.hide {
display: none;
}
.content {
overflow: hidden;
padding: 15px;
border-top: 1px solid #ddd;
font-size: 12px;
}
.ctx {
overflow: hidden;
height: 0;
transition: height 0.3s ease;
-webkit-transition: height 0.3s ease;
}
</style>
</head>
<body>
<div class="nav">
<div class="item">
<div class="head">积分 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAaVBMVEUAAACZmZmhoaGZmZmZmZmZmZmVlZWZmZmZmZmZmZmYmJiYmJiYmJiWlpaYmJiZmZmZmZmZmZmYmJiZmZmZmZmZmZmYmJiZmZmZmZmZmZmYmJiYmJiYmJiYmJiYmJiZmZmZmZmZmZmZmZmphJNhAAAAInRSTlMA9wb63csR7ea0NCshGgryzcbDvayZkIV6YVhPRj6komtpKIkVQgAAAINJREFUGNNtydcWgyAQRdFBUMAae0+5//+RIS6jYzkvXGYT6y0+dFsPoL+DQcJCDlcYJTrqIMczTAKte1qI6QizQLOMBmLmEGao11kjCxlovLbPEzr670ij8jbxKpiVYgPrYCcLEy+gUDpgpSVUQpQoFCnRkfIfPeAHdC5wV8oZMPKLL5vkB7iLrZPSAAAAAElFTkSuQmCC"
alt=""> </div>
<div class="ctx showonce" num=0 open=1>
<div class="content">
<p class="p1">一、账号被锁定</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
</div>
</div>
</div>
<div class="item">
<div class="head">金币 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAdVBMVEUAAACZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiYmJiYmJiUlJSampqWlpaUlJSZmZmZmZmZmZmYmJiZmZmZmZmYmJiampqZmZmYmJiXl5eYmJiYmJiYmJiYmJiXl5eZmZmZmZmYmJiXl5eVlZWZmZmVlZWZmZmeopVCAAAAJnRSTlMA+uPL9PDrxKw0JRIMCAT42r+0o5mQhHppYVhPPiwYz828R0YeHdDVMpMAAACDSURBVBjTbclXDoMwAATRtU3vvUP63v+IiUgxwbyvkQa5CmEKlQvFs7kixROWjG60Hy6zBXhI5jG24gvlHS+BZLFdSUEZYBU49BI9PDozPmaHJb5K2j5+fJsV3qp1aJPFeo2a1oQ/t5QNgIbpFTujYIuWYoRhEPQoBhzoSfY41FkdtCdWvgi2uS1VaQAAAABJRU5ErkJggg=="
alt=""></div>
<div class="ctx hide" num=1 open=0>
<div class="content">
<p class="p1">一、账号被锁定</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
</div>
</div>
</div>
<div class="item">
<div class="head">用户账号 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAdVBMVEUAAACZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiYmJiYmJiUlJSampqWlpaUlJSZmZmZmZmZmZmYmJiZmZmZmZmYmJiampqZmZmYmJiXl5eYmJiYmJiYmJiYmJiXl5eZmZmZmZmYmJiXl5eVlZWZmZmVlZWZmZmeopVCAAAAJnRSTlMA+uPL9PDrxKw0JRIMCAT42r+0o5mQhHppYVhPPiwYz828R0YeHdDVMpMAAACDSURBVBjTbclXDoMwAATRtU3vvUP63v+IiUgxwbyvkQa5CmEKlQvFs7kixROWjG60Hy6zBXhI5jG24gvlHS+BZLFdSUEZYBU49BI9PDozPmaHJb5K2j5+fJsV3qp1aJPFeo2a1oQ/t5QNgIbpFTujYIuWYoRhEPQoBhzoSfY41FkdtCdWvgi2uS1VaQAAAABJRU5ErkJggg=="
alt=""></div>
<div class="ctx hide" num=2 open=0>
<div class="content">
<p class="p1">一、账号被锁定</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
</div>
</div>
</div>
<div class="item">
<div class="head">礼物 <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAdVBMVEUAAACZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiYmJiYmJiUlJSampqWlpaUlJSZmZmZmZmZmZmYmJiZmZmZmZmYmJiampqZmZmYmJiXl5eYmJiYmJiYmJiYmJiXl5eZmZmZmZmYmJiXl5eVlZWZmZmVlZWZmZmeopVCAAAAJnRSTlMA+uPL9PDrxKw0JRIMCAT42r+0o5mQhHppYVhPPiwYz828R0YeHdDVMpMAAACDSURBVBjTbclXDoMwAATRtU3vvUP63v+IiUgxwbyvkQa5CmEKlQvFs7kixROWjG60Hy6zBXhI5jG24gvlHS+BZLFdSUEZYBU49BI9PDozPmaHJb5K2j5+fJsV3qp1aJPFeo2a1oQ/t5QNgIbpFTujYIuWYoRhEPQoBhzoSfY41FkdtCdWvgi2uS1VaQAAAABJRU5ErkJggg=="
alt=""></div>
<div class="ctx hide" num=3 open=0>
<div class="content">
<p class="p1">一、账号被锁定</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
<p class="p2">在平台发布违法信息、恶意攻击中伤他人、传播谣言、主播直播违规都将可能会被封禁账号</p>
</div>
</div>
</div>
</div>
<script>
var head = document.querySelectorAll('.head');
var ctx = document.querySelectorAll('.ctx');
var h = 0,
c_h, i = 0,
index, classNames,
num = 0;
var transitions = {
'transition': 'transitionend',
'WebkitTransition': 'webkitTransitionEnd'
}
//给有高度的元素初始化height;
var show = document.querySelector('.showonce');
var show_h = show.querySelector('.content').clientHeight
show.style.height = show_h + 'px';
// 给每个ctx监听动画结束事件
for (var key in transitions) {
for (var i = 0, l = ctx.length; i < l; i++) {
ctx[i].addEventListener(transitions[key], function () {
if (this.getAttribute('open') == '0') {
this.setAttribute('class', 'ctx hide');
}
})
}
}
for (var i = 0; i < head.length; i++) {
head[i].addEventListener('click', function () {
index = this.nextElementSibling.getAttribute('num');
for (var j = 0, l = ctx.length; j < l; j++) {
if ((ctx[j].getAttribute('num') == index) && (ctx[j].getAttribute('class').indexOf('hide') !=
-1)) {
ctx[j].setAttribute("open", "1");
ctx[j].setAttribute('class', 'ctx');
c_h = ctx[j].querySelector('.content').clientHeight;
this.querySelector('img').setAttribute('src',
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAaVBMVEUAAACZmZmhoaGZmZmZmZmZmZmVlZWZmZmZmZmZmZmYmJiYmJiYmJiWlpaYmJiZmZmZmZmZmZmYmJiZmZmZmZmZmZmYmJiZmZmZmZmZmZmYmJiYmJiYmJiYmJiYmJiZmZmZmZmZmZmZmZmphJNhAAAAInRSTlMA9wb63csR7ea0NCshGgryzcbDvayZkIV6YVhPRj6komtpKIkVQgAAAINJREFUGNNtydcWgyAQRdFBUMAae0+5//+RIS6jYzkvXGYT6y0+dFsPoL+DQcJCDlcYJTrqIMczTAKte1qI6QizQLOMBmLmEGao11kjCxlovLbPEzr670ij8jbxKpiVYgPrYCcLEy+gUDpgpSVUQpQoFCnRkfIfPeAHdC5wV8oZMPKLL5vkB7iLrZPSAAAAAElFTkSuQmCC'
)
ctx[j].style.height = c_h + 'px';
} else {
ctx[j].setAttribute("open", "0")
ctx[j].previousElementSibling.querySelector("img").setAttribute('src',
'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAOCAMAAADt5EdyAAAAdVBMVEUAAACZmZmZmZmZmZmZmZmZmZmZmZmZmZmYmJiYmJiYmJiUlJSampqWlpaUlJSZmZmZmZmZmZmYmJiZmZmZmZmYmJiampqZmZmYmJiXl5eYmJiYmJiYmJiYmJiXl5eZmZmZmZmYmJiXl5eVlZWZmZmVlZWZmZmeopVCAAAAJnRSTlMA+uPL9PDrxKw0JRIMCAT42r+0o5mQhHppYVhPPiwYz828R0YeHdDVMpMAAACDSURBVBjTbclXDoMwAATRtU3vvUP63v+IiUgxwbyvkQa5CmEKlQvFs7kixROWjG60Hy6zBXhI5jG24gvlHS+BZLFdSUEZYBU49BI9PDozPmaHJb5K2j5+fJsV3qp1aJPFeo2a1oQ/t5QNgIbpFTujYIuWYoRhEPQoBhzoSfY41FkdtCdWvgi2uS1VaQAAAABJRU5ErkJggg=='
)
ctx[j].style.height = 0;
}
}
})
}
</script>
</body>
</html>
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。