jquery - 滑动切换下一个元素

Question

我想要 5 个<p>标签，当点击时，<div>在下面显示一个。我可以在我命名每个<p>不同的地方这样做，<div>但这会导致很多 jQuery。

所以，目前我有：

<p class="flip">Example</p>
<div class="panel">
  <p>Example Panel</p>
</div><!--End panel-->

<p class="flip">Example</p>
<div class="panel">
  <p>Example Panel</p>
</div><!--End panel-->

<p class="flip">Example</p>
<div class="panel">
  <p>Example Panel</p>
</div><!--End panel-->

我目前拥有的 jQuery 是：

$(document).ready(function() {
  $('.flip').click(function() {
    $('.panel').slideToggle('slow');
  });
});

这显然是.panels一次切换。澄清一下，我希望第一个.flip切换第一个.panel.

Answer 1

只需要做一些简单的 DOM 遍历来选择<div class="panel">相对于被点击的正确元素<p class="flip">：

$('.flip').click(function(e) {
    $(this).next('div.panel').slideToggle('slow');
});

在click事件处理函数内部，this是<p>被点击的元素。如果它是 a并且它具有 class ，则调用.next('div.panel')将选择 DOM 中的下一个元素。<div>panel

Answer 2

我有下一个问题......我想当我点击 img 时.act将其一一隐藏

我找到了解决方案，但noact我想找到解决方案.act

这是我的代码：

$(document).ready(function(){
    $('.noact').show();
    $('.act').show();
    $('.noact').click(function(){
        var x = $(this).next('.act') ;
        x.slideToggle(1000);
    });
    $('.act').click(function(){
        $('.noact').slideToggle(1000);
    });
});