jQuery点击事件优化：如何仅切换当前h4紧邻的h5元素？

嗨，这个问题我之前也碰到过～你现在的代码里，点击h4时选中了页面上所有的h5元素，所以才会出现点一个标题全展开/收起的情况。要实现点击单个h4只切换它后面紧跟的那个h5，只需要用jQuery的next()方法来精准定位就行啦！

修改后的jQuery代码 #

$('h4').click(function() {
  // 用$(this)指代当前被点击的h4，next()获取它紧邻的下一个兄弟元素（也就是对应的h5）
  $(this).next('h5').slideToggle('slow');
});

为什么这样可行？ #

• $(this)：在点击事件的回调函数里，它代表当前被点击的那个h4元素，而不是所有h4。
• .next('h5')：只获取当前元素后面紧邻的第一个兄弟元素，并且限定是h5标签，完美匹配你的HTML结构（h4直接跟着h5）。

完整代码示例 #

<style>
h5 {
  display: none;
}
</style>

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

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$('h4').click(function() {
  $(this).next('h5').slideToggle('slow');
});
</script>

如果你的HTML结构后续有变化（比如h4和h5之间插入了其他元素），可以改用.nextAll('h5').first()来获取当前h4后面的第一个h5，不管中间有没有其他元素～

内容的提问来源于stack exchange，提问作者Daiaiai