点击按钮显示隐藏层 和 切换按钮同时显示多个隐藏层

按钮点击显示隐藏层（再次点击按钮则隐藏层关闭）：

HTML部分：

<button type="button" id="show" οnclick="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" οnclick="showHidden('hidden')" checked>点我关闭隐藏层二和三</button>
<button type="button" οnclick="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>

 

转载于:https://www.cnblogs.com/Man-Dream-Necessary/p/5388499.html