首页 > 代码库 > javascript-展开与收起
javascript-展开与收起
<!DOCTYPE html>
<html>
<head>
<title>收缩</title>
<meta charset="utf-8"/>
<style type="text/css">
body{ margin: 0 auto;padding: 0px;}
#layout{background: #e8e8e8;width: 600px;height: auto;margin: 0 auto;padding: 5px;font-size: 9pt;}
.slide{margin: 0;padding: 0;width: 600px;border-top: solid 4px gray;margin: 0 auto;}
.slide a{background: gray;text-decoration: none;text-align: center;width: 120px;height: 30px;padding: 10px 0 0 0;display: block;color: #FFF;margin: 0 auto;}
</style>
</head>
<body>
<div id="layout">
<p>手机 - 商品筛选</p>
<p> 网络：移动4G 联通3G 电信3G</p>
<div id="hideWrap" style="display: none">
<p>价格：5000元以上 4000-4999 3000元以下</p>
<p>特点：0元购机 防水 长待机</p>
</div>
</div>
<p class="slide" id="slide">
<a href="http://www.mamicode.com/#" id="btn" class="open">展开</a>
</p>
</body>
<script type="text/javascript">
function getClassName (id, cls) {
var eleId = id ? document.getElementById(id) : document;
var elements = eleId.getElementsByTagName(‘*‘);
var classNames = [];
for(var i = 0, l = elements.length; i < l; i++){
if(elements[i].className == cls){
classNames.push(elements[i]);
}
}
return classNames;
}
ele.style.display = ‘block‘;
bt.innerHTML = ‘收起-‘;
bt.className = ‘colse‘;
bt.id = ‘btnCos‘;
}
ele.style.display = ‘none‘;
bt.innerHTML = ‘展开+‘;
bt.className = ‘open‘;
}
window.onload = function(){
var hideWrap = document.getElementById(‘hideWrap‘);
var btn = document.getElementById(‘btn‘);
var btnCos = document.getElementById(‘btnCos‘);
btn.onclick = function(){
//搞了半天搞明白了 哎
var ele = getClassName(‘slide‘, ‘open‘)[0] || getClassName(‘slide‘, ‘colse‘)[0];
if(ele){
var className = ele.className;
}
if(className == ‘open‘){
show(hideWrap, btn);
}else if(className == ‘colse‘){
hide(hideWrap, btn);
}else{
return;
}
}
}
</script>
</html>
javascript-展开与收起