javascript - 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 内的所有内容都是可点击的，您可以添加以下代码此外，如果您认为这是适合您的解决方案，您可以添加以下代码，这将使它只有“翻转它!”部分是可点击的。我已经更新了下面的 fiddle 以包含此代码。

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

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