實現菜單下拉伸展摺疊效果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容器實戰(七) - 容器眼光下的文件系統
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
相關文章