So wählen Sie ein bestimmtes Element mit der Klasse in jQuery mit 'this'

Question

Ich versuche, Dropdown-Listen mit jQuery zu erstellen. Jedes Dropdown ist Teil derselben Klasse. Wie Sie sehen können, wird jetzt, wenn Sie auf die Kopfzeile mit der Klasse ".socialheader" klicken, die Sichtbarkeit der Klasse ".socialsub" umgeschaltet. Wie verwende ich das Schlüsselwort 'this', um nur die Sichtbarkeit des ausgewählten Elements zu aktivieren? Mir ist klar, dass ich für jedes Element in der Klasse .socialsub eine ID anstelle einer Klasse verwenden kann, aber ich nehme an, es gibt eine prägnantere Möglichkeit, dasselbe zu tun.

jQuery in Frage:

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

HTML (teilweise):

<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

Gehen Sie wie folgt vor: -

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

Beispiel: -

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

Sie sind fast da ... einfach ersetzen die Selektor-String mit this:

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

Answer 3

wenn ich Sie recht dann bekommen, was Sie suchen ist:

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

Answer 4

ich so etwas wie dieses

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

empfehlen

Wenn Sie Elemente dynamisch in der On-Click-Funktion erstellen, werden diese auf diese Weise korrekt gebunden.