用按钮切换显示/隐藏div？
Posted
技术标签:
【中文标题】用按钮切换显示/隐藏div？【英文标题】：toggle show/hide div with button? 【发布时间】：2011-05-30 12:14:01 【问题描述】：希望这是一个简单的问题。我有一个div，我想用一个按钮来切换隐藏/显示
<div id="newpost">
【问题讨论】：
【参考方案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';
;
SEE DEMO
jQuery：
$("#button").click(function()
// assumes element with id='button'
$("#newpost").toggle();
);
SEE DEMO
【讨论】：
您好，您知道如何通过漂亮的淡入/淡出进行切换吗？ @deemeetree：您可以将'slow' 传递给toggle。如果您使用的是纯 JS 解决方案，请告诉我，我可以为此提出一些建议
谢谢，@Andrew 我还发现在新的 jQuery 中有 fadeToggle
我正在查看其他问题，并在此线程中找到了答案：***.com/questions/18808112/… ...显然这是因为新版本的 JQuery 不再支持切换。
@BarryDoyle：实际上，toggle-event 在 1.8 中已被弃用。此答案使用toggle 的方式仍然可用，请参见此示例：jsfiddle.net/KpFRb/532【参考方案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');
);
);
作为参考，请查看demo
【讨论】：
现在 .live() 在 1.7 中已弃用，并在 1.9 中删除，因此在新版本中您可以使用 .on() （详情api.jquery.com/on） 你如何设置这个默认隐藏？编辑：想通了，只是在捕获按钮推送的代码之前添加了切换。 没有 jQuery 怎么样？ jQ每个人都可以做到 我想toggle('show') 是一个错字（有些人已经公然复制并粘贴到其他答案中），因为只有'slow' 和'fast' 是持续时间接受的字符串。它仍然有效，因为我认为任何无效字符串都将默认为'slow'。 jsfiddle.net/d5y06e6o【参考方案3】：
javascript - 切换Element.styleMDN
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>关于^ bitwise XOR as I/O togglerhttps://developer.mozilla.org/en-US/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; /* P.S: Use `!important` if missing `#content` (selector specificity). */
<button id="toggle">TOGGLE</button>
<div id="content">Some content...</div>jQuery - 切换
.toggle()Docs; .fadeToggle()Docs; .slideToggle()Docs
$("#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 - 切换.toggleClass()Docs
.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>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>【讨论】：
你不能display: none 带有过渡的元素
@Green 不，你不能。这就是动画示例的原因。
嗨，@Roko C. Buljan 先生，有没有办法在 CSS 中最初显示 div - 使用 :target 切换开关请帮助我真的需要它。谢谢。
@ProgrammingHobby 绝对是，如果您想“默认打开”上述容器之一（使用 :target 切换方法），只需将所需的 hash ID 添加到页面 URI 即：index.html#switch1 - 并看到元素 ID 开关 1 立即打开。您还可以使用 JS URL.hash 操作 URL 对象 - 如果需要：developer.mozilla.org/en-US/docs/Web/API/URL/hash
@Roko C. Buljan 非常感谢先生。祝你有美好的一天。你的回答很棒，我在我的许多项目中都使用过。谢谢。【参考方案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();">
【讨论】：
不错的纯 JavaScript 解决方案。我只是建议输入类型是按钮而不是提交，因为提交将发布表单...【参考方案5】：试试不透明度
div transition: all 0.4s ease
.hide opacity: 0; <input onclick="newpost.classList.toggle('hide')" type="button" value="toggle">
<div id="newpost">Hello</div>【讨论】：
【参考方案6】：这就是我使用类隐藏和显示内容的方式。将类更改为无会将显示更改为阻塞，将类更改为“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>
【讨论】：
【参考方案7】：<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'>
【讨论】：
【参考方案8】：您可以使用以下内容：
mydiv.style.display === 'block' = (mydiv.style.display === 'block' ? 'none' : 'block');
【讨论】：
以上是关于用按钮切换显示/隐藏div？的主要内容，如果未能解决你的问题，请参考以下文章
html AngularJS切换切换从单选按钮隐藏/显示div