使用相同的按钮隐藏和取消隐藏 div答案

【问题标题】：Hide and Unhide div with the same button使用相同的按钮隐藏和取消隐藏 div
【发布时间】：2016-11-03 12:17:43
【问题描述】：

我正在使用取消隐藏隐藏 div 的代码。

HTML：

<div id="unhide"  style="display:none;">DUMMY TEXT</div>

<button id="expand" name="expand">Show The Div</button>

JS：

document.getElementById("expand").addEventListener("click", function() 
{
    document.getElementById('unhide').style.display = "block";
});

如何使相同的按钮在再次单击后隐藏 div？是否可以更改我现在使用的代码？

【问题讨论】：

喜欢这个stackoverflow.com/questions/4528085/… ?
@G.L.P 干杯。我会更新问题，因为按钮也会有一个锚点。
太糟糕了，接受的答案是涉及使用 jQuery。并不是说我对这个库有任何反对意见，但是由于您的问题中没有提到 jQuery，所以一个普通的 JS 答案对于其他用户了解如何在不使用任何工具包的情况下执行此操作会更有用。
@damienc 这是第一个答案，也是一个简单的答案（少量单词）。我也没有看到任何香草 JS 答案。
@ApoloRadomer 是的，我同意这一点，我只是觉得更完整的答案对社区有好处。我敢打赌，很多人想知道如何做那种 UI 的东西，简洁的答案很适合复制/粘贴，但在学习方面没有我期望的那么多。

标签： javascript html css button show-hide

【解决方案1】：

使用切换来简单地隐藏和取消隐藏 div

$("#expand").click(function() {
    $("#unhide").toggle();
});

【讨论】：

【解决方案2】：

使用切换显示和隐藏，请参见下面的代码。

$(document).ready(function(){
        $("#expand").click(function(){
            $("#unhide").toggle();
        });
});

【讨论】：

【解决方案3】：

通过在 JavaScript 中进行一些修改，您可以使用相同的按钮来隐藏 div，也可以更改按钮文本，如下所示。

JS：

document.getElementById("expand").addEventListener("click", function() 
{
    var displayDiv = document.getElementById('unhide');
    var displayValue = (displayDiv.style.display === "block") ? "none" : "block";
    this.innerHTML = (displayValue === "block") ? "Hide The Div" : "Show The Div";
    displayDiv.style.display = displayValue;
});

链接参考：https://jsfiddle.net/pitchiahn/hctnvsz1/1/

【讨论】：

【解决方案4】：

使用简单的 if-else 控制流程

document.getElementById("expand").addEventListener("click", function() 
{
    var elem = document.getElementById('unhide');

    if(elem.style.display == "none") { elem.style.display = "block"; }
    else { elem.style.display = "none"; }
});

【讨论】：

【解决方案5】：

您可以使用.toggle()

$('#buttonId').on('click', function(e){
    $("#DivId").toggle();
    $(this).toggleClass('class1')
});

.class1
{
     color: orange;
}

【讨论】：

【解决方案6】：

使用 toggleClass() 来切换按钮的类

$('#buttonLogin').on('click', function(e){
    $("#login_Box_Div").toggle();
    $(this).toggleClass('class1')
});

.class1
{
     color: orange;
}

【讨论】：

【解决方案7】：

document.getElementById("expand").addEventListener("click", function() 
{
    if(document.getElementById('unhide').style.display == 'block')
          document.getElementById('unhide').style.display = 'none';
       else
          document.getElementById('unhide').style.display = 'block';
});

可以查看正在运行的sn -p here

【讨论】：

【解决方案8】：

这是纯java脚本

var button = document.getElementById('button'); // Assumes element with id='button'

button.onclick = function() {
    var div = document.getElementById('newpost');
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    }
    else {
        div.style.display = 'block';
    }
};

【讨论】：