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

用于此jQuery slideUp代码的正确选择器是什么？

1 个答案: