希望这是一个简单的问题。我有一个div我想用按钮切换隐藏/显示
<div id="newpost">
Answers:
HTML：
<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>
jQuery的：
jQuery(document).ready(function(){
jQuery('#hideshow').live('click', function(event) {
jQuery('#content').toggle('show');
});
});
对于jQuery 1.7及更高版本
jQuery(document).ready(function(){
jQuery('#hideshow').on('click', function(event) {
jQuery('#content').toggle('show');
});
});
供参考，请检查此演示
toggle('show')是一个错字（有些人已经公然复制并粘贴到其他答案中），因为只有'slow'并'fast'在持续时间内被接受。尽管如此，它仍然有效，因为我认为任何无效的字符串都将默认为'slow'。jsfiddle.net/d5y06e6o
纯JavaScript：
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';
}
};
jQuery的：
$("#button").click(function() {
// assumes element with id='button'
$("#newpost").toggle();
});
'slow'给toggle。如果您使用的是纯JS解决方案，请告诉我，我可以为此提供一些建议
Element.styleMDNvar toggle = document.getElementById("toggle");
var content = document.getElementById("content");
toggle.addEventListener("click", function() {
content.style.display = (content.dataset.toggled ^= 1) ? "block" : "none";
});#content{
display:none;
}<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>关于^按位XOR作为I / O切换器
https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLElement/dataset
.classList.toggle()var toggle = document.getElementById("toggle");
var content = document.getElementById("content");
toggle.addEventListener("click", function() {
content.classList.toggle("show");
});#content{
display:none;
}
#content.show{
display:block; /* P.S: Use `!important` if missing `#content` (selector specificity). */
}<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>.toggle()文件; .fadeToggle()文件; .slideToggle()文件$("#toggle").on("click", function(){
$("#content").toggle(); // .fadeToggle() // .slideToggle()
});#content{
display:none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>.toggleClass()文档.toggle()切换元素的display "block"/"none"值
$("#toggle").on("click", function(){
$("#content").toggleClass("show");
});#content{
display:none;
}
#content.show{
display:block; /* P.S: Use `!important` if missing `#content` (selector specificity). */
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div><summary>和<details>（在IE和Opera Mini上不受支持）
<details>
<summary>TOGGLE</summary>
<p>Some content...</p>
</details>checkbox[id^=toggle],
[id^=toggle] + *{
display:none;
}
[id^=toggle]:checked + *{
display:block;
}<label for="toggle-1">TOGGLE</label>
<input id="toggle-1" type="checkbox">
<div>Some content...</div>radio[id^=switch],
[id^=switch] + *{
display:none;
}
[id^=switch]:checked + *{
display:block;
}<label for="switch-1">SHOW 1</label>
<label for="switch-2">SHOW 2</label>
<input id="switch-1" type="radio" name="tog">
<div>1 Merol Muspi...</div>
<input id="switch-2" type="radio" name="tog">
<div>2 Lorem Ipsum...</div>:target（只是为了确保您的武器库中有它）
[id^=switch] + *{
display:none;
}
[id^=switch]:target + *{
display:block;
}<a href="#switch1">SHOW 1</a>
<a href="#switch2">SHOW 2</a>
<i id="switch1"></i>
<div>1 Merol Muspi ...</div>
<i id="switch2"></i>
<div>2 Lorem Ipsum...</div>如果您选择JS / jQuery方式之一来实际切换className，则始终可以向元素添加动画过渡，这是一个基本示例：
var toggle = document.getElementById("toggle");
var content = document.getElementById("content");
toggle.addEventListener("click", function(){
content.classList.toggle("appear");
}, false);#content{
/* DON'T USE DISPLAY NONE/BLOCK! Instead: */
background: #cf5;
padding: 10px;
position: absolute;
visibility: hidden;
opacity: 0;
transition: 0.6s;
-webkit-transition: 0.6s;
transform: translateX(-100%);
-webkit-transform: translateX(-100%);
}
#content.appear{
visibility: visible;
opacity: 1;
transform: translateX(0);
-webkit-transform: translateX(0);
}<button id="toggle">TOGGLE</button>
<div id="content">Some Togglable content...</div>display: none使用过渡元素
这是执行切换的普通JavaScript方法：
<script>
var toggle = function() {
var mydiv = document.getElementById('newpost');
if (mydiv.style.display === 'block' || mydiv.style.display === '')
mydiv.style.display = 'none';
else
mydiv.style.display = 'block'
}
</script>
<div id="newpost">asdf</div>
<input type="button" value="btn" onclick="toggle();">
尝试不透明
这就是我使用类隐藏和显示内容的方式。将类更改为无将更改显示为块，将类更改为“ a”将显示为无。
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color:#777777;
}
block1{
display:block; background-color:black; color:white; padding:20px; margin:20px;
}
block1.a{
display:none; background-color:black; color:white; padding:20px; margin:20px;
}
</style>
</head>
<body>
<button onclick="document.getElementById('ID').setAttribute('class', '');">Open</button>
<button onclick="document.getElementById('ID').setAttribute('class', 'a');">Close</button>
<block1 id="ID" class="a">
<p>Testing</p>
</block1>
</body>
</html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$('#hideshow').click(function(){
$('#content').toggle('show');
});
});
</script>
和HTML
<div id='content'>Hello World</div>
<input type='button' id='hideshow' value='hide/show'>