'this'を使用してjQueryで特定の要素を選択する方法

Question

jQueryでドロップダウンを作成しようとしています。各ドロップダウンは同じクラスの一部です。ご覧のように、今すぐ '.socialheader'クラスでヘッダーをクリックすると、 '.socialsub'クラスの可視性が切り替わります。クリックした特定の要素の可視性のみを切り替えるために 'this'キーワードを使用するにはどうすればよいですか？私は.socialsubクラスの各要素にクラスの代わりにidを使用できることを認識していますが、同じことを行うためのより簡潔な方法があると思います。問題の

のjQuery：

$(document).ready(function(){ 
$('.socialsub').hide(); 
$('.socialheader').click(function(){ 
     $('.socialsub').slideToggle(); 
});//SHOWS AND HIDES SOCIALSUB CLASS 
}); 

HTML（一部）：あなたはほとんどそこにいる

<h2 class='socialheader'> Green Great Dragons </h2> 
    <div class='socialsub'> 


     <h3> Facebook </h3> 
     <a href="http://www.facebook.com/greengreatdragons">Green Great Dragons on Facebook</a> 


    <br /> 
    <br /> 

     <h3> Bandcamp </h3> 

     <a href="http://greengreatdragons.bandcamp.com">Green Great Dragons on BandCamp</a> 


    <br /> 
    <br /> 
    </div> 


    <h2 class='socialheader'> Colin Jones </h2> 
    <div class='socialsub'> 

     <h3> Twitter </h3> 
     <a href="http://www.twitter.com/colinjones93">Colin Jones on Twitter</a> 


    <br /> 


     <h3> Instagram </h3> 
     <a href="http://www.instagram.com/shredelicious">Colin Jones on Instagram</a> 


     <h3> YouTube </h3> 
     <a href="https://www.youtube.com/channel/UCwz6MLT9afvqHfn06AMkL6Q">Colin Jones on YouTube</a> 


    <br />  
    <br /> 

Answer 1

を

以下のようにします。 -

$(document).ready(function(){ 
    $('.socialsub').hide(); 
    $('.socialheader').click(function(){ // you missed $ 
    $(this).next('.socialsub').slideToggle(); 
    }); 
}); // missed in your code 

例： -

$(document).ready(function(){ 
 
$('.socialsub').hide(); 
 
$('.socialheader').click(function(){ // you missed $ 
 
    $(this).next('.socialsub').slideToggle(); 
 
}); 
 
}); // missed in your code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<h2 class='socialheader'> Green Great Dragons </h2> 
 
<div class='socialsub'> 
 
\t <h3> Facebook </h3> 
 
\t <a href="http://www.facebook.com/greengreatdragons">Green Great Dragons on Facebook</a> 
 
\t <br /> 
 
\t <br /> 
 
\t <h3> Bandcamp </h3> 
 
\t <a href="http://greengreatdragons.bandcamp.com">Green Great Dragons on BandCamp</a> 
 
\t <br /> 
 
\t <br /> 
 
</div> 
 

 
<h2 class='socialheader'> Colin Jones </h2> 
 
<div class='socialsub'> 
 
\t <h3> Twitter </h3> 
 
\t <a href="http://www.twitter.com/colinjones93">Colin Jones on Twitter</a> 
 
\t <br /> 
 
    <h3> Instagram </h3> 
 
    <a href="http://www.instagram.com/shredelicious">Colin Jones on Instagram</a> 
 
    <h3> YouTube </h3> 
 
    <a href="https://www.youtube.com/channel/UCwz6MLT9afvqHfn06AMkL6Q">Colin Jones on YouTube</a> 
 
\t <br />  
 
\t <br /> 
 
</div>

Answer 2

...単にthisとセレクタ文字列に置き換えます。

$(document).ready(function(){ 
    $('.socialsub').hide(); 
    $('.socialheader').click(function(){ 
     $(this).slideToggle(); 
    });//SHOWS AND HIDES *THIS* SOCIALSUB CLASS 
}); 

Answer 3

私は、あなたが探しているものを右に、あなたを取得する場合です：

$('.socialheader').click(function() { 
    $(this).slideToggle(); 
}); 

Answer 4

私はこの

$(document).on('click','.socialheader',function(){ 
    if($('.socialsub').is(":visible")){ 
    $('.socialsub').hide(); 
    }else{ 
    $('.socialsub').show(); 
    } 
}); 

のようなものをお勧めします

オンクリック機能で要素を動的に作成すると、この方法で正しくバインドされます。