0

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

4

6 回答 6

5

你可以试试

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

然后

$('.toggle').toggle();  //Automatic Display or hide the matched elements.
于 2012-10-24T11:48:37.090 回答
3

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

现场演示

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

 $('.someclass').show();
于 2012-10-24T11:46:59.747 回答
1

有两种方法：

  • 按类选择 div
  • 选择包装器的子 div

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

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

和

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

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

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

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

$("#wrapper div").hide();
于 2012-10-24T12:10:11.620 回答
0

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

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

然后把它们都藏起来，

$('div .toHide').hide();
于 2012-10-24T11:48:19.233 回答
0

解决方案 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();
于 2012-10-24T11:48:49.673 回答
0

另一个答案：

使用父元素：

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

$("#yourId div").hide();
于 2012-10-24T12:14:20.560 回答