Jquery 多 DIV 隐藏/显示答案

【问题标题】：Jquery multi DIVs hide/showJquery 多 DIV 隐藏/显示
【发布时间】：2012-10-24 11:45:47
【问题描述】：

我想用 jquery 或 javascript 显示隐藏多个 div。我搜索了网络，但我发现代码必须具有唯一的 div 喜欢：

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

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

编辑因为我在 JQuery 完全是菜鸟，所以我不知道如何实现任何东西，所以我有这个

    <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 函数生成的，这解决了它，谢谢大家！我有很多东西要学。

【问题讨论】：

标签： php javascript jquery

【解决方案1】：

你可以试试

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

然后

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

【讨论】：

【解决方案2】：

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

Live Demo

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

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

【讨论】：

【解决方案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();

【讨论】：

【解决方案4】：

添加一些类来选择所有要隐藏的潜水，

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

然后全部隐藏，

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

【讨论】：

【解决方案5】：

解决方案一

<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();

【讨论】：

【解决方案6】：

另一个答案：

使用父元素：

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

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

【讨论】：