使用 slideToggle 进行重复类

Question

我正在使用 jQuery 的 slideToggle 打开和关闭盒子。

代码与类配合使用以调用幻灯片。这很好用，但是，我想将这张幻灯片用于多个盒子。当使用两个或更多时，当点击其中一个时，它会打开所有的框，而不是一个点击它自己。

这里是 jQuery:

$(document).ready(function(){
  $(".nav-extra-box").click(function(){
    $(".haja").slideToggle(250);
  });
});

这里是 HTML:

<div class="nav-extra-box"></div>
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div class="nav-extra-box"></div>
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div class="nav-extra-box"></div>
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

Answer 1

你的问题是你正在使用 class 选择器，它 returns 对象的伪数组，在该数组上调用 .slideToggle() 将在 [=16] 上调用该函数=]这些项目中的每个。

相反，您想 仅查找所需 class 的下一个 div:

$(document).ready(function(){
  $(".nav-extra-box").click(function(){
    $(this).next(".haja").slideToggle(250);
  });
});

Answer 2

您可以使用 this 来识别单击的元素，并使用 next() 函数识别其旁边的 open/close 和 div。

$(document).ready(function(){
  $(".nav-extra-box").click(function(){
    $(this).next('.haja').slideToggle(250);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div class="nav-extra-box">a</div>
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div class="nav-extra-box">b</div>
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

<div class="nav-extra-box">c</div>
<div class="haja">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>

使用 slideToggle 进行重复类

Use slideToggle for repetitive classes

jquery

toggle

slide

使用 slideToggle 进行重复 类

Use slideToggle for repetitive classes

jquery

toggle

slide

使用 slideToggle 进行重复类