用button切换显示/隐藏div？
希望这是一个简单的问题。 我有一个div，我想切换隐藏/显示一个button。
<div id="newpost"> 看看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'); }); });
演示
纯粹的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'; } };
看DEMO
jQuery ：
$("#button").click(function() { // assumes element with id='button' $("#newpost").toggle(); });
看DEMO
下面是一个简单的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();">
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"; }, false);
#content{ display:none; }
<button id="toggle">TOGGLE</button> <div id="content">Some content...</div>
这就是我如何使用一个类来隐藏和显示内容。 将类更改为无，将显示器更改为阻止，将类更改为“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'>
您可以使用以下内容：
mydiv.style.display === 'block' = (mydiv.style.display === 'block' ? 'none' : 'block');
