Javascript 如何使用“this”在jQuery中选择具有类的特定元素

我正在尝试使用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 />  

---

你就快到了。。。只需将选择器字符串替换为以下内容：

按如下方式操作：-

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

例如：-

$document.readyfunction{ $'.socialsub'.hide； $'.socialheader'。单击函数{//您错过了$ $this.next'.socialsub'.slideToggle； }; }; // 在你的代码中漏掉了 绿色巨龙 脸谱网 乐队营 科林·琼斯 啁啾 一款图片分享应用 YouTube

---

如果我猜对了，那么您需要的是：

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

---

我推荐这样的东西

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

---

如果您在单击功能中动态创建元素，这种方式将正确绑定它们。

您可以发布html以获得更多许可吗？其中至少有一部分包含socialheader和socialsubboth@ColinR.Jones很高兴帮助您：：

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