jQuery sildeToggle入れ子divs

Question

これは時間の変更でなければなりませんが、jQueryの特定のdivをどのようにターゲットにするのかわかりません。slideToggle

私はこれまでこれをやったことを誓っていますが、親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()機能を使用する方法が1つあります。

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

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

別 - siblings()を使用。

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

Answer 2

だけnext('.content')前parent()を追加し、設定は完了です。

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