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

.moreProductsBox如何与文档中的.viewMoreProducts相关联？它是一个兄弟姐妹，还是你文件中其他元素的孩子？如果它是兄弟，而不是下一个，你可以尝试：

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

因为.next只能获得下一个兄弟。

Answer 2

接下来适用于兄弟节点，你的html中没有'next'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 3

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

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

提出的其他建议无效。

jquery获取下一个div调用moreProductsBox并将其滑动以打开它

3 个答案: