切换以下选择器

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元素，而不是完全跟随h4。因此我的问题是：如何触发给定物种的下一个选择器（例如＆＃34; h5＆＃34;在该特定示例中）。

类似$（这个＆gt;＆＃34; h5＆＃34;）.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() {
     ...
  });
});