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

【问题标题】：What's the correct selector to use for this jQuery slideUp code?用于此 jQuery slideUp 代码的正确选择器是什么？
【发布时间】：2014-06-20 16:28:23
【问题描述】：

我正在使用 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 来展示我目前所拥有的。

【问题讨论】：

它工作完美。你到底需要什么？检查此jsfiddle.net/6C42Q/27。删除第 2 行 $(this).siblings().find('.hidden').slideUp(); find() 就足够了
也适合我。你用的是哪个浏览器？
@ShaunakD - 单击第三个框，然后单击第二个。看看第三个框是如何保持打开状态的，因为它位于不同的 div 组中？
它只是部分工作。因为按钮被分成 2 个不同的父 div，所以您可以打开多个按钮。不过@j08691 下面的回复效果很好，谢谢大家！
哦，它就在那儿！

标签： javascript jquery html slidetoggle slideup

【解决方案1】：

你可以添加一行来处理它：

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

jsFiddle example

【讨论】：

完美。非常感谢！