Question

好的，所以它必须是时间的变化，但我不能为我的生活找出针对jQuery slideToggle的特定div的目标。

我发誓我以前做过这个，但我不记得正确的方法是针对嵌套在父div中的div的特定类。

以下是一个示例：

$('.content').hide();
$('.slider').click(function() {
    $(this).next('.content').slideToggle();
    this.toggle = !this.toggle;
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
    <div class="link"> <a class="slider" href="#">Click Here</a> </div>
    <div class="content">
        <p> <a href="http://google.com" target="_blank">
Content stuff for item 1.
</p>
</div>
</div>

<div class="item">
  <div class="link">
<a class="slider" href="#">Click Here</a> </div>
    <div class="content">
        <p>Content stuff for item 2.</p>
    </div>
</div>

我知道这很简单，我只是不记得它是什么。

Answer 1

如何解决问题的一种方法 - 使用parent()和find()函数。

＆＃13;

$('.content').hide();
$('.slider').click(function() {
  $(this).parent().parent().find('.content').slideToggle();
  this.toggle = !this.toggle;
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="link">
    <a class="slider" href="#">Click Here</a>
  </div>
  <div class="content">
    <p>
      <a href="http://google.com" target="_blank">
Content stuff for item 1.</a>
</p>
</div>
</div>

<div class="item">
  <div class="link">
<a class="slider" href="#">Click Here</a>
  </div>
  <div class="content">
    <p>Content stuff for item 2.</p>
  </div>
</div>

＆＃13;

另一个 - 使用siblings()。

$('.slider').click(function() {
  $(this).parent().siblings('.content').slideToggle();
  this.toggle = !this.toggle;
});

Answer 2

只需在parent()之前添加next('.content')即可。

$(document).ready(function(){
   $('.content').hide();

 $('.slider').click(function() {
   $(this).parent().next('.content').slideToggle();
   this.toggle = !this.toggle;
   return false;
 });
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item">
  <div class="link">
<a class="slider" href="#">Click Here</a>
  </div>
 <div class="content">
<p>
  <a href="http://google.com" target="_blank">
Content stuff for item 1.
</p>
</div>
</div>

<div class="item">
  <div class="link">
<a class="slider" href="#">Click Here</a>
  </div>
<div class="content">
<p>Content stuff for item 2.</p>
 </div>
 </div>
JS

Answer 3

另一种方法

$(function(){
  $('.content').hide();
  $('.slider').click(function() {
     var $div = $(this).parent().parent().find('.content');
     $div.slideToggle();
     $(".content").not($div).slideUp();
  });
});

DEMO

jQuery sildeToggle嵌套div

3 个答案: