切換以下選擇器

Question

我有很多這樣的元素

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

我在哪里隱藏答案

h5{
display:none;
}

並再次顯示它們

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

當然，只需單擊任何h4即可切換所有h5元素，而不是緊隨其后的元素。 因此，我的問題是：如何觸發給定種類的下一個選擇器（在特定示例中為“ h5”）。

像$（this>“ h5”）.slideToggle（...沒辦法。但這可以解決嗎？

Answer 1

試試下面的代碼

$("h4").click(function() { 
   $(this).next("h5").toggle(); 
});

Answer 2

您可以指定h5元素的ID。

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

Answer 3

您可以為第一個孩子使用以下內容

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

或僅針對單擊h4元素的所有子h5進行此操作。

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