javascript - 一次只展开/折叠一个内容

Question

我找到了一些非常有用的答案来帮助我使用 java 展开和折叠内容，但现在我不知道如何让它一次只展开一个......所以当一个 div 展开时，如果你点击展开另一个，它折叠第一个。有任何想法吗？这是小提琴和代码。请帮忙！

http://jsfiddle.net/eK8X5/248/

HTML：

<div class="container">
        <div class="header">
            <span>Expand</span>
        </div>

    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

<div class="container">
    <div class="header"><span>Expand</span>

    </div>
    <div class="content">
        <ul>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
            <li>This is just some random content.</li>
        </ul>
    </div>
</div>

CSS：

.container .content {
    display: none;
    padding : 5px;
}

脚本 ：

$(".header").click(function () {

        $header = $(this);
        //getting the next element
        $content = $header.next();
        //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
        $content.slideToggle(500, function () {
            //execute this after slideToggle is done
            //change text of header based on visibility of content div
            $header.text(function () {
                //change text based on condition
                return $content.is(":visible") ? "Collapse" : "Expand";
            });
        });
});

Answer 1

看看http://getbootstrap.com/2.3.2/javascript.html#collapse你会看到一个很好的手风琴菜单示例。您可以通过仅使用 Bootstrap 和 Bootstrap javascript 文件来实现它。或者您可以深入研究他们的代码，看看他们是如何做到的。我建议弄清楚他们是如何做到的，以便您可以根据需要进行调整。仅仅因为它的 Bootstrap 并不意味着它是最好的方法。

Answer 2

尝试

var $contents = $(".content")
var $headers = $(".header").click(function () {

    var $header = $(this);
    //getting the next element
    var $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.stop(true, true).slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

    $headers.not($header).text("Expand");
    $contents.not($content).stop(true, true).slideUp();
});

演示：小提琴