Я пытаюсь создать выпадающие с JQuery. Каждый выпадающий является частью одного и того же класса. Как вы можете видеть, прямо сейчас, когда вы щелкаете по заголовку с помощью класса .socialheader, он переключает видимость класса .socialsub. Как использовать ключевое слово «this», чтобы переключать видимость только по конкретному элементу, на который нажали? Я понимаю, что мог бы использовать идентификаторы вместо класса для каждого элемента в классе .socialsub, но я предполагаю, что есть более краткий способ сделать то же самое.

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 />  
0
Colin R. Jones 30 Авг 2017 в 02:48

4 ответа

Лучший ответ

Сделайте это, как показано ниже:

$(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'> 
	<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 />
</div>
1
Anant Singh---Alive to Die 30 Авг 2017 в 00:33

Я рекомендую что-то подобное

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

Если вы когда-нибудь динамически создадите элементы в функции «нажми», этот путь будет правильно связывать их.

0
Kyle Brown 30 Авг 2017 в 00:28

Вы почти там ... просто замените строку селектора на this:

$(document).ready(function(){
   $('.socialsub').hide();
   $('.socialheader').click(function(){
      $(this).slideToggle();
   });//SHOWS AND HIDES *THIS* SOCIALSUB CLASS
});
0
clabe45 29 Авг 2017 в 23:51

Если я вас правильно понял, то, что вы ищете:

$('.socialheader').click(function() {
    $(this).slideToggle();
});
0
Kristianmitk 29 Авг 2017 в 23:52