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

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

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

Answer 2

使用此节目和实际的切换，请参阅下面的代码。

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

Answer 3

使用简单的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 4

您可以使用.toggle()

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

.class1
{
     color: orange;
}

Answer 5

使用toggleClass（）切换按钮的类

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

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

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

Answer 8

这是纯java脚本

＆＃13;

select 
    name, PRODUCTION_DAY, daytime 
from
    (select 
         name, PRODUCTION_DAY, daytime, 
         row_number() over (partition by name order by daytime desc) as seqnum
     from 
         RESULT_1 t 
     where 
         PRODUCTION_DAY < '15-May-2015'
    ) 
where 
    seqnum = 1

＆＃13;

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

8 个答案: