Question

我有以下代码：

<p class="expand">Click to expand</p>
<div class="expand-box">
   <p>Some content here</p>
</div>

用这个jquery：

$('.expander-box').hide();
$('.expand').toggle(function() {
   $(this).next('.expander-box').slideDown();
}, function() {
   $(this).next('.expander-box').slideUp();
});

我的问题是：这段代码工作正常，但如果扩展器框不是直接在p.expand标签之后，那么它就不会工作了。是否有更好的选择器使用而不是next（），以便在单击时它将从单击的元素开始并沿着页面向下，直到找到扩展框，然后在第一个匹配的元素上执行动画？$ this

Answer 1

您可以使用.nextAll()和:first，如下所示：

$('.expander-box').hide();
$('.expand').toggle(function() {
   $(this).nextAll('.expander-box:first').slideDown();
}, function() {
   $(this).nextAll('.expander-box:first').slideUp();
});

或者使用.click()和.slideToggle()更简单，就像这样：

$('.expander-box').hide();
$('.expand').click(function() {
   $(this).nextAll('.expander-box:first').slideToggle();
});

请注意，这两个都会找到下一个.expander-box 这是一个兄弟，如果它是一个更复杂的结构，你最好知道结构并使用tree traversal methods来导航到以this开头的元素，类似于现在只与兄弟姐妹一起做的事情。

当然，像大多数情况一样，有几种变体：

$(this).nextAll('.expander-box:first').slideToggle();
$(this).nextAll('.expander-box').first().slideToggle();
$(this).nextAll('.expander-box').eq(0).slideToggle();
//etc..

Answer 2

使用两个参数调用jQuery构造函数＆＃34; roots＆＃34;第二个参数的查询：

$（＆＃39; .expander-box＆＃39;，this）会返回所有＆＃39; .expander-box＆＃39; 。< 因此，如果您使HTML看起来像这样：

<p class="expand">Click to expand <div class="expand-box"> <p>Some content here</p> </div> </p>

上述查询将执行您希望它执行的操作。

第一个匹配元素需要jQuery选择器

2 个答案: