定位元素/ div的下一个实例

Question

我有以下HTML结构和JavaScript文件：

html的

<li>
 <button class="show-more"></button>
 some more elements
 <div class="hidden"></div>
</li>

的JavaScript

$( ".show-more" ).click(function() {
  event.preventDefault();
  $( this ).next().slideToggle( "fast", function() {
  });
});

我需要点击事件切换.hidden的下一个第一个实例，但点击事件的目标是第一个元素，而不是.hidden的下一个实例，任何想法我都可以去关于它？

Answer 1

nextAll和first：

$(this).nextAll('.hidden').first().slideToggle(...);

这个问题有更多关于此问题：Efficient, concise way to find next matching sibling?

Answer 2

另一种可能的解决方案：

$('~.hidden:first', this).slideToggle("fast");

这将匹配.hidden上下文中类this的第一个，下一个兄弟。 ~ - 选择器将覆盖所有后续兄弟姐妹。

<强> Demo

<强>参考

Next sibling selector

first selector

context of selector