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

Question

我正在使用取消隐藏隐藏 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？是否可以更改我现在使用的代码？

Answer 1

使用简单的 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"; }
});

Answer 2

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

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

Answer 3

您可以使用.toggle()

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

.class1
{
     color: orange;
}

Answer 4

使用 toggleClass() 切换按钮的 class

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

.class1
{
     color: orange;
}

Answer 5

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

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

Answer 6

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';
});

您可以查看运行片段 here

Answer 7

通过在 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;
});

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

Answer 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';
    }
};

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

Hide and Unhide div with the same button

html

javascript

css

button

show-hide