I'm trying to make a simple accordion style menu using divs:
<div class="subdomainLevel">
Subdomain <a href="#" class="pageToggle">open/close</a>
<div class="pageLevel">Page Level <a href="#" class="messageToggle">open/close</a>
<div class="pageMessage">Message</div>
</div>
</div>
<div class="subdomainLevel">
Subdomain <a href="#" class="pageToggle">open/close</a>
<div class="pageLevel">Page Level <a href="#" class="messageToggle">open/close</a>
<div class="pageMessage">Message</div>
</div>
</div>
My jquery is as follows:
var page = $(".subdomainLevel").children(".pageLevel");
$(".pageToggle").click(function () {
$(page).slideToggle("fast");
});
How can I make my JQuery reusable so that when I click on m开发者_JAVA百科y "open/close" link, the link only controls the child of that div and not the other divs on the page with the same class.
Thanks,
instead of:
$(page).slideToggle("fast");
use:
$(this).siblings('.pageLevel').slideToggle("fast");
example at:
http://jsfiddle.net/2CEmx/
Edit: so you don't really need this line at all:
var page = $(".subdomainLevel").children(".pageLevel");
Try this:
$(this).next(".pageLevel").slideToggle("fast");
精彩评论