按钮点击显示隐藏层(再次点击按钮则隐藏层关闭):
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>