Question

我正在寻找针对此挑战的HTML / CSS解决方案：我有多个具有相同类或相同ID的元素，我想使用按钮或切换开关同时显示/隐藏它们。所以我有一个点击事件，当我点击代表所有这些元素的那个类或ID时，它们都隐藏了。当我再次点击时，它们必须再次显示。

我很感激

由于

Answer 1

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。

Answer 2

不对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

Answer 3

你可以用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>

Answer 4

你可以使用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");
 }
});

Answer 5

您的任务没有CSS解决方案。寻找JQuery函数.toggle（）。

$('.button').click(function(){
   $('.some_class').toggle();
});

Answer 6

在Jquery中，你可以简单地调用：

$('.ToggleMe).toggle();

其中.ToggleMe是元素的类。

按ID切换：

$("#ToggleMe").toggle();

切换我的名字：

$('div[name=ToggleMe]')

HTML / CSS显示/隐藏多个元素？

6 个答案: