无法隐藏所有 div 内容答案

【问题标题】：Cannot hide all div contents无法隐藏所有 div 内容
【发布时间】：2015-06-26 18:35:06
【问题描述】：

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

<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 折叠。

【问题讨论】：

标签： javascript jquery

【解决方案1】：

Step1 : 折叠除当前的所有内容 div。

Step2 : 切换当前内容 div 的可见性。

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

Fiddle

【讨论】：

正是我想要的。保持简短。非常感谢！ :)

【解决方案2】：

你可以使用：

$(".title").click(function () {
  $(this).next().slideToggle('fast').parent().siblings().find('.content').slideUp('fast');
});

Working Demo

【讨论】：

【解决方案3】：

只需在您的代码中添加和 else 条件：

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

JSFIDDLE：http://jsfiddle.net/ghorg12110/2skczuze/3/

【讨论】：

【解决方案4】：

您只需从if 语句中提取一行代码：

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

这里是演示：http://jsfiddle.net/2skczuze/5/

【讨论】：

我很努力，但我真正需要做的就是重新整理东西？！哈哈，非常感谢！

【解决方案5】：

试试这个DEMO

只需添加if 语句，当下一个内容可见时：

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

【讨论】：

【解决方案6】：

如果你想让一个展开的 div 折叠而不打开另一个 div 那么可以这样做

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

【讨论】：

【解决方案7】：

这是你想要的吗？只需添加一个 else 块并再次切换元素。

HTML

<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>

CSS

.container {
width:300px;
margin-bottom:5px;
border:1px solid #d3d3d3;
text-align:center;
}

.container .title {
background-color:#00ffcc; 
width:auto;
padding: 2px;
cursor: pointer;
font-weight: bold;
}
.container .content {
background-color: #f0f0f0;
display: none;
padding : 5px;
 }

Javascript

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

http://jsfiddle.net/2skczuze/1/

【讨论】：