Question

我想用jquery或javascript显示隐藏多个div。我在网上搜索但是我发现代码必须有唯一的div 像：

<div id="div1">text</div>
<div id="div2">text</div>

依此类推，但是我想在一个foreache php函数中添加div，所以我不能拥有多个ID， foreache是一个div包装器。所以，我的问题是我该怎么做？

EDIT 因为我是JQuery的完全noob，我不知道如何实现任何东西，所以我有这个

    <div id="wrapper">
  <div class="title">
     <div class="hide"> Hidden Text</div>
  </div>
    </div>

当我点击标题div时，我希望显示class =“hide”。

解决方案：

    .box
{ margin:10px;
  height:auto;
}
.panel,.flip
{
padding:5px;
text-align:center;
background-color:#e5eecc;
border:solid 1px #c3c3c3;
}
.panel
{
padding:50px;
display:none;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".flip").click(function(){
    $(this).next().slideToggle(500);
  });
});
</script>

<div class="box">
     <h1>This is the div</h1>
  <div class="flip">If u click </div>
<div class="panel"> This will show</div>

问题是因为我说div是由foreach函数生成的，这解决了它，感谢大家！我有很多东西需要学习。

Answer 1

你可以尝试

<div id="div1" class="toggle">text</div>
<div id="div2" class="toggle">text</div>

然后

$('.toggle').toggle();  //Automatic Display or hide the matched elements.

Answer 2

您可以指定公共类，然后使用该类选择器显示具有公共类的隐藏div。

<强> Live Demo

<div id="div1" class="someclass">text</div>
<div id="div2" class="someclass">text</div>

 $('.someclass').show();

Answer 3

有两种方法：

按班级选择div
选择包装器的子div

第一种方法与其他人描述的一样，添加class属性来选择div：

<div class="hide">content</div>

和

$(".hide").hide();

第二种方法是给父div一个唯一的id：

<div id="wrapper">
    <div>content</div>
    <div>content</div>
</div>

然后按标签名称选择所有孩子：

$("#wrapper div").hide();

Answer 4

添加一些课程以选择要隐藏的所有潜水，

<div class="toHide" id="div1">text</div>
<div class="toHide" id="div2">text</div>

然后将它们全部隐藏起来，

$('div .toHide').hide();

Answer 5

解决方案1

<div id="div1">text</div>
<div id="div2">text</div>

jQuery('#div1, #div2').hide();
jQuery('#div1, #div2').show();
jQuery('#div1, #div2').toggle();

解决方案2

<div id="div1" class="some-div">text</div>
<div id="div2" class="some-div">text</div>

jQuery('.some-div').hide();
jQuery('.some-div').show();
jQuery('.some-div').toggle();

Answer 6

另一个答案：

使用父元素：

<div id="yourId">
   <div id="div1">text</div>
   <div id="div2">text</div>
</div>

$("#yourId div").hide();

Jquery多DIV隐藏/显示

6 个答案: