jqueryがmoreProductsBoxと呼ばれる次のdivを取得し、slideToggleを開きます

Question

クリックしたリンクの後に次の利用可能なdivにアクセスしようとしていますが、moreProductsBoxのクラスでslideToggleを開いています。

これは私が今持っているものです。

リンク：

<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() 
}; 

は*に.moreProductsBoxを関連している方法

Answer 1

ような何かがしたい：

与えられた他の提案は機能しませんでした。

Answer 2

より明確にするマークアップを更新しました文書内の.viewMoreProducts？それは兄弟であるか、文書の下にある他の要素の子ですか？それは兄弟ではなく非常に次のものである場合、あなたは試してみてください：

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

.nextので、あなただけに非常に次の兄弟を取得します。マッチした要素の集合の各要素の直後の兄弟を取得します：兄弟ノード上

Answer 3

次の作品は、

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

説明あなたのhtmlに何の「次」のdivはありません。セレクタが提供されている場合は、そのセレクタに一致する場合にのみ次の兄弟を取得します。

があなたのアンカーとdivのマークアップの両方が含まれているHTMLを投稿し、あなたはおそらく、私はクラスmoreProductsBoxとその次のdivにアクセスするための唯一の方法だった

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