JQuery：手风琴风格菜单切换

Question

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

我的jquery如下：

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

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

谢谢，

Answer 1

而不是：

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

使用：

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

示例：

http://jsfiddle.net/2CEmx/

修改 所以你根本不需要这一行：

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

Answer 2

试试这个：

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