Javascript：使用切换按钮隐藏和显示 div 标签
Posted
技术标签:
【中文标题】Javascript：使用切换按钮隐藏和显示 div 标签【英文标题】：Javascript: Hiding and Showing div tag with a toggle button 【发布时间】：2014-01-26 16:10:12 【问题描述】：我会直接说：
我需要做的是通过按下一个按钮隐藏一个特定的 div，它应该是一个切换，所以基本上：按一次隐藏，再按一次显示，再按一次隐藏等等......
我希望在 CSS 中完成隐藏/显示规则并在纯 javascript 中完成交互（请不要使用 jquery）。好吧，这就是我需要做的，但我不太确定如何执行 javascript 代码。
html:
<p class="button">Show/hide<p>
<div> I want to hide this by pressing the button above</div>
css:
#showhide
display: none;
.button
display: block;
height: 30px;
width: 100px;
background: green;
text-align: center;
padding-top: 10px;
padding-left: 0px;
font: 15px arial bold;
border: 1px solid black;
text-decoration: none;
list-style:none;
margin: 10px 0px 10px 0px;
http://jsfiddle.net/fyUJc/14/
另外，如果你觉得这个问题不属于这里或者很愚蠢，请尽量不要粗鲁，我只是想在这里学习。
【问题讨论】：
您可以在 div 中添加和删除一个类以显示/隐藏它。优秀的综述：***.com/questions/195951/… 用jquery你可以使用这个简单的函数.toggle() api.jquery.com/toggle 【参考方案1】：您可以使用onclick 方法。将您的 HTML 设置为：
<p class="button" onclick="toggle_visibility('hideMe')">Show/hide</p>
<div id="hideMe">I want to hide this by pressing the button above</div>
并拥有以下 JavaScript：
function toggle_visibility(id)
var e = document.getElementById(id);
if (e.style.display == 'block' || e.style.display=='')
e.style.display = 'none';
else
e.style.display = 'block';
DEMO
【讨论】：
【参考方案2】：这里是您的代码的更新 JSFiddle，它适用于本机浏览器方法并实现一个简单的切换组件 - http://jsfiddle.net/fyUJc/31/
var button = document.querySelector('.button');
button.addEventListener('click', function(event)
var target = document.querySelector(button.getAttribute('data-target'));
if (target.style.display == "none")
target.style.display = "block";
button.innerHTML = button.getAttribute('data-shown-text');
else
target.style.display = "none";
button.innerHTML = button.getAttribute('data-hidden-text');
);
通过创建一个切换按钮，您将进入 GUI 领域，这是非常复杂的事情。
当前的浏览器技术没有提供一套丰富的工具来帮助您处理您需要在 GUI 中处理的所有事情。 jQuery 也无济于事，因为 GUI 更多的是处理组件和状态，而不是操作 DOM。
即使上面的代码在 Chrome 中工作，您仍然需要注意 DOM 和事件中的浏览器差异，并且您需要对组件进行更好的抽象。我的代码中有很多问题没有解决，如果您每次都从头开始编写它们，将很难正确解决。比如：
如何初始化页面上新添加的切换器？ 如何同步 div 和按钮的状态？ 如何扩展和插入按钮行为？我强烈建议您研究为常见问题提供解决方案的 UI 相关库或框架。请参阅 ReactJS、Dojo 或 Sencha（例如 ExtJS）等等。寻找定义小部件/组件生命周期的框架以及扩展和定义自定义框架的方法。
浏览器技术只是没有为制作 UI 组件提供适当的抽象。
【讨论】：
【参考方案3】：在您的 HTML 标记中使用“onclick”属性的替代解决方案：
<!DOCTYPE html>
<html>
<head>
<script>
function toggle()
var div = document.getElementById("divSection");
if (div.style.display =='block')
div.style.display = 'none';
return;
div.style.display ='block';
</script>
</head>
<body>
<p>Click the button to trigger a function.</p>
<p class="button" onclick="toggle()">Show/hide</p>
<div id='divSection'> I want to hide this by pressing the button above</div>
</body>
</html>
希望对你有帮助。
【讨论】：
【参考方案4】：您可以将事件侦听器添加到P 标签并调用Toggle() 函数来交换显示值，如下所示。
此处为示例 - JSFiddle
function Toggle()
var div = document.getElementsByTagName('div')[0];
if (div.style.display == 'none')
div.style.display = 'block';
else
div.style.display = 'none';
(function ()
var button = document.querySelectorAll(".button");
for (var i = 0; i < button.length; i++)
if (button[i].addEventListener)
button[i].addEventListener("click", function ()
Toggle();
);
else
button[i].attachEvent("click", function ()
Toggle();
);
)();
尽管您最好将IDs 添加到您的元素中以使其更易于引用。
【讨论】：
以上是关于Javascript：使用切换按钮隐藏和显示 div 标签的主要内容，如果未能解决你的问题，请参考以下文章