标签：
按钮点击显示隐藏层（再次点击按钮则隐藏层关闭）：
HTML部分：
<button type="button" id="show" onclick="showHidden()">点我显示隐藏层</button>
<div id="hidden" style="display:none">我是隐藏层。</div>
JS部分：
<script type=‘text/javascript‘>
function showHidden() {
var dis = document.getElementById(‘hidden‘);
if (dis.style.display == ‘none‘) {
document.getElementById(‘show‘).innerHTML = "再点我关闭隐藏层一 ";
dis.style.display = "";
} else {
document.getElementById(‘show‘).innerHTML = "点我显示隐藏层一 ";
dis.style.display = "none";
}
}
</script>
按钮切换同时显示多个隐藏层（需要用到jQuery）：
HTML部分：
<button type="button" onclick="showHidden(‘hidden‘)" checked>点我关闭隐藏层二和三</button>
<button type="button" onclick="showHidden(‘show‘)">点我打开隐藏层二和三</button>
<div class="row hiddenAndShow" style="display:none">我是隐藏层二</div>
<div class="row hiddenAndShow" style="display:none">我是隐藏层三</div>
JS部分：
<script>
function showHidden(hiddenAndShow) {
if (hiddenAndShow == "hidden") {
$(‘.hiddenAndShow‘).each(function () {
$(this).css(‘display‘, ‘none‘);
});
} else {
$(‘.hiddenAndShow‘).each(function () {
$(this).css(‘display‘, ‘block‘);
});
}
}
</script>
示例：
<!doctype html>
<html>
<header>
<meta charset="utf-8">
</header>
<body>
<div style="text-align:center">
<button type="button" id="show" onclick="showHidden()">点我显示隐藏层一</button>
<div id="hidden" style="display:none">
我是隐藏层一
</div>
</div>
<br>
<br>
<div style="text-align:center">
<button type="button" onclick="showHidden1(‘hidden‘)" checked>点我关闭隐藏层二和三</button>
<button type="button" onclick="showHidden1(‘show‘)">点我打开隐藏层二和三</button>
<div class="row hiddenAndShow" style="display:none">我是隐藏层二</div>
<div class="row hiddenAndShow" style="display:none">我是隐藏层三</div>
</div>
<script src="http://www.weidulove.com/js/jquery-2.0.3.min.js"></script>
<script type=‘text/javascript‘>
function showHidden() {
var dis = document.getElementById(‘hidden‘);
if (dis.style.display == ‘none‘) {
document.getElementById(‘show‘).innerHTML = "再点我关闭隐藏层一";
dis.style.display = "";
} else {
document.getElementById(‘show‘).innerHTML = "点我显示隐藏层一";
dis.style.display = "none";
}
}
</script>
<script>
function showHidden1(hiddenAndShow) {
if (hiddenAndShow == "hidden") {
$(‘.hiddenAndShow‘).each(function () {
$(this).css(‘display‘, ‘none‘);
});
} else {
$(‘.hiddenAndShow‘).each(function () {
$(this).css(‘display‘, ‘block‘);
});
}
}
</script>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/Man-Dream-Necessary/p/5388499.html
