JQuery：手风琴风格菜单切换答案

【问题标题】：JQuery: Accordion style menu toggleJQuery：手风琴风格菜单切换
【发布时间】：2011-07-16 20:22:05
【问题描述】：

我正在尝试使用 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>

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

我的jquery如下：

var page = $(".subdomainLevel").children(".pageLevel");
$(".pageToggle").click(function () {
    $(page).slideToggle("fast");
});

如何使我的 JQuery 可重用，以便当我单击“打开/关闭”链接时，该链接仅控制该 div 的子级，而不控制页面上具有相同类的其他 div。

谢谢，

【问题讨论】：

标签： jquery toggle

【解决方案1】：

代替：

 $(page).slideToggle("fast");

使用：

$(this).siblings('.pageLevel').slideToggle("fast");

示例在：

http://jsfiddle.net/2CEmx/

编辑： 所以你根本不需要这条线：

var page = $(".subdomainLevel").children(".pageLevel");

【讨论】：

【解决方案2】：

试试这个：

$(this).next(".pageLevel").slideToggle("fast");

【讨论】：