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

Question

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

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

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

然后我在 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>

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

Answer 1

所以看起来您希望在单击“翻转”时将翻转面板类项目隐藏起来？然后，我建议您将它们放在 div 中，这样当您单击它时，整个 div 就会折叠。

这样你可以做这样的事情：

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

如果您认为这是适合您的代码，但不喜欢 div 内的所有内容都是可点击的，您可以添加以下代码 此外，如果您认为这是适合您的解决方案，您可以添加以下代码，使其只有“翻转它！”部分是可点击的。我在下面更新了我的小提琴以包含此代码。

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

I've made a JSFiddle for you if you click this line to look.

Answer 2

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

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

请注意，传递的选择器会从对象中排除。

Answer 3

选择您每次点击的p .flippanel 中的下两个。

nextAll选择以下所有兄弟姐妹

slice(0, 2) 缩小到前两个

试试：

$(".flip").click(function(){
    $(this).nextAll(".flippanel").slice(0, 2).toggle();
  });

DEMO

Answer 4

数字作为 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>

这样你的造型例如可以附加到 Flippanel 类，你的 JS 看起来像这样：

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

Answer 5

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

会起作用的。

http://jsfiddle.net/xyqwmzhj/2/

但您确实应该考虑重写您的 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>

Answer 6

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

发件人：

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

然后是要添加的jQuery代码：

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