jquery 获取名为 moreProductsBox 的下一个 div 并滑动打开它

Posted 2023-02-25

【中文标题】jquery 获取名为 moreProductsBox 的下一个 div 并滑动打开它

【英文标题】：jquery get next div called moreProductsBox and slideToggle it open

【发布时间】：2010-12-29 22:49:41

【问题描述】：

尝试在我单击的链接之后访问下一个可用的 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()
;

*更新的标记更清晰

【参考方案1】：

.moreProductsBox 与文档中的.viewMoreProducts 有什么关系？它是文档中的兄弟元素还是其他元素的子元素？如果它是兄弟姐妹，但不是非常下一个，您可以尝试：

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

因为.next 只会让你下一个兄弟姐妹。

【讨论】：

p 链接 viewMoreProducts 与名为 moreProductsBox 的隐藏 div 相距几个 div（我猜仍然是兄弟）。会有很多部分，每个部分都有隐藏的 div。

@estern - 你真的应该展示你的标记，否则我们只会猜测如何选择正确的元素。

我知道标记我只是不确定它是否是兄弟。项目的顺序是这样的：

我更新了问号以帮助澄清我目前正在使用的代码和 jquery 代码

【参考方案2】：

next 适用于兄弟节点，您的 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;

【参考方案3】：

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

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

给出的其他建议无效。