javascript - 无法隐藏所有div内容

Question

我正在制作可折叠/可展开的div，类似于 Accordion ，如果我单击特定标题，则会出现与标题相关的内容。如果我单击不同的标题，则先前打开的内容将在显示最近单击的标题的当前内容之前关闭，因此一次仅打开一个内容部分。我已经解决了。

<div class="container">
    <div class="title">ONE</div>
    <div class="content">Content One</div>
</div>
<div class="container">
    <div class="title">TWO</div>
    <div class="content">Content Two</div>
</div>
<div class="container">
    <div class="title">THREE</div>
    <div class="content">Content Three</div>
</div>
<div class="container">
    <div class="title">FOUR</div>
    <div class="content">Content Four</div>
</div>

但是，我正在尝试使所有 div 都可以折叠并隐藏所有内容。我真的很难弄清楚那部分。这是我到目前为止所拥有的:

$(".title").click(function () {
    $content = $(this).next();
    if (!($content.is(":visible"))) {
        $(".content").slideUp("fast");
        $content.slideToggle(200);
    }
});

演示:http://jsfiddle.net/2skczuze/

我对 Javascript 还很陌生，所以我不知道如何在不打开另一个 div 的情况下使展开的 div 折叠起来。

Answer 1

第1步:折叠除当前内容div之外的所有内容div。

第二步:切换当前内容 div 的可见性。

$(".title").click(function () {
   $(".content").not($(this).next()).slideUp();
    $(this).next().slideToggle();
});

Fiddle