jquery 获取下一个名为 moreProductsBox 的 div 并使用 sliderToggle 打开它

Question

尝试访问我单击的链接后的下一个可用 div，使用 moreProductsBox 类，然后滑动将其打开。

这就是我现在所拥有的：

链接：

<div class="productContent">
<p><a href="#" onclick="return false;"  class="viewMoreProducts">View Related Products </a></p>
</div>
<div class="productSelectBar">
<div class="selectBar">
</div>
</div>

<!-- View More Products Box -->
<div class="moreProductsBox" style="display:none;">
</div>

Jquery 是：

// Show Hidden Product Boxes on Expand  
$(".viewMoreProducts").click(function() {
    $(this).nextAll(".moreProductsBox:first").slideToggle()
};

*更新的标记更加清晰

Answer 1

next 适用于兄弟节点，html 中没有“下一个”div

http://api.jquery.com/ next/

描述：获取匹配元素集中每个元素的紧随其后的同级元素。如果提供了选择器，则仅当它与该选择器匹配时，它才会检索下一个同级。

发布包含锚点和 div 标记的 html，您可能需要类似的内容

// this should work if the p tag has a sibling div moreProductsBox
$(this).parent().next('moreProductsBox').slideToggle;

Answer 2

我使用 moreProductsBox 类访问下一个 div 的唯一方法是：

$(this).parent().parent().parent().find(".moreProductsBox:first").slideToggle();

给出的其他建议不起作用。

Answer 3

文档中的 .moreProductsBox 与 .viewMoreProducts 有何关系？它是文档中其他元素的同级元素还是子元素？如果它是同级，但不是下一个，您可以尝试：

$(this).nextAll(".moreProductsBox:first").slideToggle();

因为 .next 只会为您提供下一个同级。