jquery get nächste div namens moreProductsBox und slideToggle es öffnen

Question

versuchen, Zugriff auf die nächste verfügbare div nach dem ein Link, den ich klicke, mit einer Klasse von moreProductsBox und dann slideToggle öffnen.

Dies ist, was ich habe jetzt:

-Link:

<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 ist:

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

* Aktualisierte Auszeichnungs klareres

Answer 1

der einzige Weg für mich, das nächste div mit der Klasse zuzugreifen moreProductsBox tun sollte:

Die anderen Vorschläge, die gegeben wurden, haben nicht funktioniert.

Answer 2

zu sein Wie .moreProductsBox bezieht sich auf .viewMoreProducts im Dokument? Ist es ein Geschwister oder ein Kind eines anderen Elements weiter unten in Ihrem Dokument? Wenn es ein Geschwister ist, aber nicht die nächsten ein, könnten Sie versuchen:

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

seit .next wird nur dienächsten Geschwister bekommen.

Answer 3

nächste Arbeiten auf Geschwister-Knoten gibt es keine 'next' div in Ihrem HTML

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

Beschreibung: Holen Sie sich das sofort jedes Element in dem Satz von abgestimmten Elementen folgenden Geschwister. Wenn ein Selektor bereitgestellt wird, ruft er das nächste Geschwister nur ab, wenn es mit diesem Selektor übereinstimmt.

die HTML-Post, die sowohl Ihren Anker und div Auszeichnungs enthält, möchten Sie wahrscheinlich so etwas wie

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