• 问题 *

如果您查看.next(selector)的documentation，它不会“找到”下一个与选择器匹配的兄弟节点。相反，它只查看下一个兄弟元素，并且只返回与选择器匹配的元素，而选择器不是您想要的。
下面是.next()的文档：
产品名称：获取匹配元素集中每个元素的紧接着的兄弟元素。如果提供了一个选择器，则仅当下一个同级与该选择器匹配时，它才会检索该同级。
因此，您可以看到.next(".box")将查看紧跟在.arrow元素之后的h2元素（这是下一个兄弟元素），然后将其与.box选择器进行比较，由于它们不匹配，它将返回一个空的jQuery对象。

使用.nextAll（）的解决方案

如果你想要匹配选择器的下一个兄弟，你可以使用这个：

$(this).nextAll(".box").eq(0).slideToggle();

这将查找所有与选择器匹配的同级，然后只提取第一个。

创建自己的.findNext（）方法

我经常想知道为什么jQuery没有这样的方法，所以我自己做了一个：

// get the next sibling that matches the selector
// only processes the first item in the passed in jQuery object
// designed to return a jQuery object containing 0 or 1 DOM elements
jQuery.fn.findNext = function(selector) {
    return this.eq(0).nextAll(selector).eq(0);
}

然后，你只需要用途：

$(this).findNext(".box").slideToggle();

选项：在HTML中添加更多结构，使事情更简单，更灵活

仅供参考，解决此类问题的常见方法是在每组DOM元素周围放置一个包含div，如下所示：

<div class="container">
    <img class="arrow" src="images/navigation/arrowright.png">
    <H2>More Information</H2>
    <div class="box">
            <h2>Bibendum Magna Lorem</h2>
            <p>Cras mattis consectetur purus sit amet fermentum.</p>
    </div>
</div>

<div class="container">
     <img class="arrow" src="images/navigation/arrowright.png">
     <H2>A Second Group of Information</H2>
     <div class="box">
            <h2>Bibendum Magna Lorem</h2>
            <p>Cras mattis consectetur purus sit amet fermentum.</p>
     </div>    
</div>

然后，您可以使用对元素的精确定位不太敏感的代码：

$(".arrow").click(function() {
    $(this).closest(".container").find(".box").slideToggle();
});

这将使用.closest()向上查找包含和公共父元素，然后使用.find()查找该组中的.box元素。