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>元素。调用.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);
    });
});

slide切换下一个元素

2 个答案: