javascript - 此 jQuery SlideUp 代码使用的正确选择器是什么？

Question

我正在使用 Foundation 创建一个页面，其中有多个折叠按钮。当您点击按钮时，其中隐藏的内容会向下滑动，如果有任何展开的按钮，它们会向上滑动。

我已经部分工作了，但是因为我有两个成对的按钮，所以我无法找出正确的选择器来关闭扩展的 div，无论它们位于何处。

这是我的 HTML:

<div class="large-6 columns">
    <div class="box">
        Initial Content
        <div class="hidden">
            This is hidden content
        </div>
    </div>
    <div class="box">
        Initial Content
        <div class="hidden">
            This is hidden content
        </div>
    </div>
</div>

<div class="large-6 columns">
    <div class="box">
        Initial Content
        <div class="hidden">
            This is hidden content
        </div>
    </div>
    <div class="box">
        Initial Content
        <div class="hidden">
            This is hidden content
        </div>
    </div>
</div>

CSS:

.box {
    height:auto;
    background:#000;
    color:#fff;
    cursor:pointer;
    width:200px;
    margin-bottom:1em;
}
.hidden {
    height:200px;
    display:none;
}
    .hidden.open {
        display:block;
    }

和 JavaScript:

$(document).ready(function() {
    $('.box').click(function() {
        $(this).find('.hidden').slideToggle();
        $(this).siblings().find('.hidden').slideUp();
        return false;
    });
});

这是一个JSFiddle展示我到目前为止所拥有的。

Answer 1

您可以添加一行来处理它:

$(this).parent().siblings().find('.hidden').slideUp();

<强> jsFiddle example