J'ai un tas d'éléments comme ça

<h4>Question</h4>
<h5>Answer</h5>
<h4>Question2</h4>
<h5>Answer2/h5>

Où je cache les réponses par

h5{
display:none;
}

Et les afficher à nouveau par

$( "h4" ).click(function() {
  $( "h5" ).slideToggle( "slow", function() {
  });
});

Bien sûr, cela fait basculer TOUS les éléments h5 en cliquetant TOUT h4 et pas exactement le suivant. Par conséquent ma question: Comment puis-je déclencher le prochain sélecteur suivant d'une espèce donnée (comme "h5" dans cet exemple particulier).

Quelque chose comme $ (this> "h5") .slideToggle (... n'a pas fonctionné. Mais cela pourrait-il être une sorte de solution?

2
Daiaiai 12 avril 2018 à 18:49

3 réponses

Meilleure réponse

Essayez le code ci-dessous

$("h4").click(function() { 
   $(this).next("h5").toggle(); 
});
3
John Wink 12 avril 2018 à 15:56

Vous pouvez donner les identifiants des éléments h5.

$(function() {
  $("h5").toggle();

  $("h4").click(function(e) {
    var answerSelector = '#' + $(this).data('answer-id');
    $(answerSelector).toggle();
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4 data-answer-id="a1">Question</h4>
<h5 id="a1">Answer</h5>
<h4 data-answer-id="a2">Question2</h4>
<h5 id="a2">Answer2</h5>
0
Christopher M Miller 12 avril 2018 à 15:55

Vous pouvez utiliser ce qui suit pour le premier enfant

$("h4").click(function() {
  $(this).children("h5:first-child").slideToggle( "slow", function() {
     ...
  });
});

Ou tout simplement pour tous les enfants h5 de l'élément h4 sur lequel vous avez cliqué.

$("h4").click(function() {
  $(this).children("h5").slideToggle( "slow", function() {
     ...
  });
});
0
Anastasios Selmanis 12 avril 2018 à 15:58