实现菜单下拉伸展折叠效果demo
背景：帮后台作的一个下拉效果，原来的在手机上点击反应很慢，并且不必加载那么多js，索性就用原生js实现了。html
这是折叠的状态。web
这是展开状态，中间有个拉开过分的效果，同一时间只能有一个展开。ide
点击查看效果
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">1、帐号被锁定</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">1、帐号被锁定</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">1、帐号被锁定</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">1、帐号被锁定</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>
相关文章
- 1. Axure RP9 - 实现菜单下拉及折叠效果
- 2. axure8.0 折叠下拉菜单
- 3. Vue 实现展开折叠效果
- 4. iOS下拉菜单效果实现
- 5. js实现下拉菜单效果
- 6. div+css下拉菜单效果实现
- 7. CSS+HTML实现下拉菜单效果
- 8. bootstrap实现折叠菜单
- 9. slideToggle+slideup实现手机端折叠菜单效果
- 10. React Native实现手风琴折叠菜单效果
- 更多相关文章...
- • ionic 上拉菜单(ActionSheet) - ionic 教程
- • SVG 模糊效果 - SVG 教程
- • ☆基于Java Instrument的Agent实现
- • Docker容器实战(七) - 容器眼光下的文件系统
相关标签/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
欢迎关注本站公众号,获取更多信息
相关文章