使用按钮切换显示/隐藏div吗？

Question

希望这是一个简单的问题。 我有一个div ，我想使用按钮切换隐藏/显示

<div id="newpost">

Answer 1

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

查看演示

Answer 2

看一下jQuery Toggle

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

供参考，请检查此演示

Answer 3

JavaScript-切换Element.style ^MDN

 var 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

JavaScript-切换.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; /* PS: Use `!important` if missing `#content` (selector specificity). */ } 

 <button id="toggle">TOGGLE</button> <div id="content">Some content...</div> 

jQuery-切换

.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> 

jQuery-Toggle .toggleClass() ^文件

.toggle()切换元素的display "block"/"none"值

 $("#toggle").on("click", function(){ $("#content").toggleClass("show"); }); 

 #content{ display:none; } #content.show{ display:block; /* PS: 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> 

HTML5-使用<summary>和<details>切换

（在IE和Opera Mini上不受支持）

 <details> <summary>TOGGLE</summary> <p>Some content...</p> </details> 

HTML-使用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> 

HTML-使用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> 

CSS-使用: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> 

Answer 4

这是执行切换的普通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();">

Answer 5

这就是我使用类隐藏和显示内容的方式。 将类更改为无将更改显示为块，将类更改为“ 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>

Answer 6

<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'>

Answer 7

尝试不透明

 div { transition: all 0.4s ease } .hide { opacity: 0; } 

 <input onclick="newpost.classList.toggle('hide')" type="button" value="toggle"> <div id="newpost">Hello</div> 

Answer 8

您可以使用以下内容：

mydiv.style.display === 'block' = (mydiv.style.display === 'block' ? 'none' : 'block');