Javascript jQuery在具有相同类的多个div上切换

我正在尝试在我的站点上启动并运行jQuery切换

到目前为止，我的代码是：

<script>
$(document).ready(function(){
  $(".flip").click(function(){
    $(".flippanel").toggle();
  });
});
</script>

$（文档）.ready（函数（）{
$（“.flip”）。单击（函数（）{
$（“.flippanel”）.toggle（）；
});
});

我在HTML中有：

<p class="flip">Flip it!</p>
<p class="flippanel">This is a paragraph with little content.</p>
<p class="flippanel">This is another small paragraph.</p>
<p class="flip 2">Flip it!</p>
<p class="flippanel 2 ">This is a paragraph with little content.</p>
<p class="flippanel 2">This is another small paragraph.</p>

翻转它

这是一段内容很少的段落

这是另一个小段落

翻转它

这是一段内容很少的段落

这是另一个小段落

---

如何让它独立切换两个面板？现在，每个面板同时切换。

选择您每次单击的面板的下两个

p.flippanel

nextAll

选择以下所有同级

切片（0,2）

缩小到前两个

尝试：

---

那么，当您单击“翻转”时，您是否希望flippanel类项目隐藏自己？然后我建议你把这些放在一个div里面，这样当你点击它时，整个div就会崩溃

这样，您可以执行以下操作：

$(".flip").click(function(){
  $(this).children().toggle();
});

如果您认为这是适合您的代码，但不喜欢div中的所有内容都可以单击，那么可以添加以下代码 此外，如果您认为这是适合您的解决方案，您可以添加以下代码，使其仅可单击“Flip it！”部分。我已经在下面更新了我的小提琴，以包含此代码

$(".flippanel").click(function( event ) {
  event.stopPropagation();
});

会有用的

<>但是你确实应该考虑改写HTML，使用同一类的内容，和孩子一起或类似的事情。

[编辑] 如果希望它开始关闭，请添加

style="display: none;"

到应该隐藏的div

完整html：

<p class="flip" style="cursor:  pointer;">Flip it!</p>
<div style="display: none;">
<p class="flippanel">This is a paragraph with little content.</p>
<p class="flippanel">This is another small paragraph.</p>
</div>
<p class="flip" style="cursor:  pointer;">Flip it!</p>
<div style="display: none;">
<p class="flippanel">This is a paragraph with little content.</p>
<p class="flippanel">This is another small paragraph.</p>
</div>

翻转它

这是一段内容很少的段落

这是另一个小段落

翻转它

这是一段内容很少的段落

这是另一个小段落

---

数字作为html类无效

试着这样做：

<p class="flip flip_1">Flip it!</p>
<p class="flippanel flippanel_1">This is a paragraph with little content.</p>
<p class="flippanel flippanel_1">This is another small paragraph.</p>
<p class="flip flip_2">Flip it!</p>
<p class="flippanel flippanel_2 ">This is a paragraph with little content.</p>
<p class="flippanel flippanel_2">This is another small paragraph.</p>

<script>
$(document).ready(function(){
  $(".flip").click(function(){
    $(".flippanel_1").toggle();
  });
});
</script>

翻转它

这是一段内容很少的段落

这是另一个小段落

翻转它

这是一段内容很少的段落

这是另一个小段落

通过这种方式，您的样式（例如）可以连接到flippanel类，您的JS可以如下所示：

<p class="flip flip_1">Flip it!</p>
<p class="flippanel flippanel_1">This is a paragraph with little content.</p>
<p class="flippanel flippanel_1">This is another small paragraph.</p>
<p class="flip flip_2">Flip it!</p>
<p class="flippanel flippanel_2 ">This is a paragraph with little content.</p>
<p class="flippanel flippanel_2">This is another small paragraph.</p>

<script>
$(document).ready(function(){
  $(".flip").click(function(){
    $(".flippanel_1").toggle();
  });
});
</script>

$（文档）.ready（函数（）{
$（“.flip”）。单击（函数（）{
$（“.flippanel_1”）.toggle（）；
});
});

您需要的是使用。它将获取下一个元素，直到您点击传递的选择器

$(".flip").click(function(){
  $(this).nextUntil('.flip').toggle();
});

---

请注意，传递的选择器被排除在对象之外。

我认为您的jQuery代码可以用于第一次翻转它！ 我建议你应该为第二次翻转创建另一个翻转！您需要更改第二个flip-it HTML标记类

发件人：

---

好吧，你对两个部分都使用了相同的类“flippanel”-这自然会使两个部分相应地切换。嗨，EntiendNull，我意识到-我在寻求关于如何拥有无限数量的翻转面板的指导，所以这是一个迭代的例子。我也不是特别清楚我的实际需求-我需要一个描述的切换按钮（即“Flip it！”位），然后我需要一个充满内容的容器。我用它在一个网页上显示多个“购买”购物车小部件——这是为一家培训公司准备的，在那里一门课程可以有多种分发选项。这门课程效果非常好！非常感谢-其他解决方案也很有用，但这似乎是我部署的最简单的解决方案。最好的，JimAh-我刚刚发现了一个问题。如果单击翻转中的任何内容，它将充当切换。我需要把开关分开，这样当你打开它的时候它就不会动了。一开始可能不清楚！啊，是的，这个解决方案将所有内容打包成两个分区。因此，如果单击这两个div中的任何空格，它将折叠div本身。我假设你只想要两个可折叠面板。詹姆斯，我仍然建议你将面板分成两个单独的分区。（或者不管你有多少）这将使未来的代码更容易编写，更容易处理，等等。我不确定网站的其余部分应该如何设计，但如果你想要两个独立的“面板”，听起来就像你在描述div。这似乎非常有效-我实际上可以将内容包装在一个div中，这样它就只用于下一个元素。有没有办法让所有的翻转面板都关闭？编辑答案，添加包装器div，将游标设为指针，并更改错误的类名。考虑给div自己的类，并将显示外包：隐藏在CSS中。光标：指针也是一样，它属于。flip类顺便说一句：如果答案符合你的需要，请随意接受：-）请不要这样做。不要建议别人重复代码。相反，检查以前的答案并从中学习（并考虑删除这个答案）。我可以观察到你坚持“不告诉别人重复一个代码”，而不陈述暗示，这肯定会说服我停止你想要的。但不仅仅是你的“不要”系列。或者你还有什么别的意思。谢谢你期待的合作。

<p class="flip 2">Flip it!</p>
<p class="flippanel 2 ">This is a paragraph with little content.</p>
<p class="flippanel 2">This is another small paragraph.</p>

<p class="flip2">Flip it!</p>
<p class="flippanel2 ">This is a paragraph with little content.</p>
<p class="flippanel2">This is another small paragraph.</p>

$(document).ready(function(){ 
    $(".flip2").click(function(){
        $(". flippanel2").toggle();
    });
});