使用相同按钮隐藏和取消隐藏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"; 
});

我怎么能做出同样的按钮隐藏再次点击它后的股利？是否有可能改变我现在使用的代码？

来源

2016-11-03 Apolo Radomer

这样http://stackoverflow.com/questions/4528085/toggle - 隐藏div与按钮？ –

@ G.L.P干杯。我会更新这个问题，因为按钮也会有一个锚点。 –

这是可接受的答案是一个涉及使用jQuery。并非我对图书馆有任何反对意见，但由于jQuery没有在您的问题中提及，所以对于其他用户来说，vanilla JS回答将更有用，以便理解如何在不使用任何工具包的情况下执行此操作。 – damienc

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

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

来源

2016-11-03 12:26:21

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

来源

2016-11-03 12:22:36 Bimbonkens

您可以使用.toggle()

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

.class1 
{ 
    color: orange; 
}

来源

2016-11-03 12:27:12

使用toggleClass（）来切换按钮类

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

 
.class1 
 
{ 
 
    color: orange; 
 
}

来源

2016-11-03 12:27:49 Purushothaman

使用这个节目和实德切换，请参见下面的代码。

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

来源

2016-11-03 12:27:50

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

来源

2016-11-03 12:38:07 RonyLoud

通过这样做在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/

来源

2016-11-03 14:41:16

这是纯粹的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'; 
 
    } 
 
};

来源

2016-11-11 05:54:32

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

回答

相关问题