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

因此，当您点击＆＃34;翻转它时，您希望flippanel类项目隐藏起来？＃34 ;?然后我建议你把这些放在div中，这样当你点击它时，整个div就会崩溃。

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

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

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

$(".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(); });缩小到前两个

尝试：

{{1}}

<强> DEMO

Answer 4

$(".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 5

数字作为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 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();
    });
});

jQuery在同一个类的多个div上切换

6 个答案: