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

你的问题是你正在使用一个类选择器，它返回一个伪对象数组，在该数组上调用.slideToggle()将在这些项的每个上调用该函数。 / p>

相反，您希望只找到所需类的下一个 div：

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

Answer 2

您可以使用this标识点击的元素，然后使用next()功能打开/关闭旁边的div。

＆＃13;

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

＆＃13;

<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>

＆＃13;

将slideToggle用于重复类

2 个答案: