我正在寻找应对这一挑战的 HTML/CSS 解决方案： 我有多个具有相同类或相同 ID 的元素，我想使用按钮或切换开关同时显示/隐藏它们。所以我有一个点击事件，当我点击代表所有这些元素的类或 ID 时，它们都会隐藏。当我再次单击时，它们必须再次显示。
我会很感激的
谢谢
【问题讨论】：
HTML 和 CSS 用于描述内容的静态表示 - 无法使用 HTML/CSS 动态隐藏/显示内容。您需要使用 Javascript 来执行此操作。代码示例（非常简单和不雅的示例）：
<div id="somediv">Hide This</div>
<input type="button" onclick="hide('somediv')" value="Hide Div"/>
<script type="text/javascript">
function hide(div_id) {
document.getElementById(div_id).style.display = "none";
}
</script>
更好的解决方案是使用 jQuery，但我认为对于您的情况，您应该先学习 Javascript 和 HTML/CSS 的基础知识，然后再使用 jQuery。
【讨论】：
不要对 HTML 元素使用相同的 ID！使用元素类属性。 jQuery 是个好东西，但是对于这样的东西来说太过分了 :)
<div class="hide1">One</div>
<div class="hide2">Two</div>
<a href="#" onclick="ToggleVisibility('hide1'); return false;">One</a>
<a href="#" onclick="ToggleVisibility('hide2'); return false;">Two</a>
<a href="#" onclick="ToggleVisibility('nosuchclass'); return false;">No hide</a>
还有简单的JS代码：
function ToggleVisibility(divClass)
{
var els = document.getElementsByClassName(divClass);
for(var i = 0; i < els.length; i++)
{
els[i].style.visibility = els[i].style.visibility == "hidden" ? "visible" : "hidden";
}
}
根据 W3Schools，可见性是所有主流浏览器的标准 http://www.w3schools.com/jsref/prop_style_visibility.asp
【讨论】：
您只需使用 CSS 即可。 请参阅这个简单的示例 http://jsfiddle.net/rHSmV/（代码粘贴在下面）。
请看这里http://dev.opera.com/articles/view/css3-show-and-hide/
这里是http://cssdeck.com/labs/css-only-showhide
更多深入示例
<html>
<head>
<style type='text/css'>
/* Use a checkbox to workaround showing and hiding */
input[type=checkbox] {
position: absolute;
top: -9999px;
left: -9999px;
}
label {
cursor: pointer;
}
/* Shown */
div.showhide {
display: inline;
}
/* Hidden */
input[type=checkbox]:checked ~ div.showhide {
display: none;
}
</style>
</head>
<body>
<label for="showHide">Show/Hide</label>
<input type="checkbox" id="showHide">
<div class="showhide">
<p>Show and hide me without JavaScript!</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>
<div class="showhide">
<p>Show and hide me too without JavaScript!</p>
</div>
</body>
</html>
【讨论】：
你可以使用 jquery...
$("id of button").click(function(e) {
if($("class of elements").css("display") != "none") {
$("class of elements").hide();
$("class of elements").css("display","none");
} else {
$("class of elements").show();
$("class of elements").css("display","block");
}
});
【讨论】：
您的任务没有 CSS 解决方案。查找 JQuery 函数 .toggle()。
$('.button').click(function(){
$('.some_class').toggle();
});
【讨论】：
在 Jquery 中，您可以简单地调用：
$('.ToggleMe).toggle();
其中 .ToggleMe 是您的元素的类。
按 ID 切换：
$("#ToggleMe").toggle();
然后切换我的名字：
$('div[name=ToggleMe]')
【讨论】：