Bootstrap 3 数据切换手风琴答案

【问题标题】：Boostrap 3 data-toggle accordianBootstrap 3 数据切换手风琴
【发布时间】：2014-02-11 02:10:09
【问题描述】：

这就是我所拥有的

<a data-toggle="collapse" href="#collapsible-1">Digital</a>

  <div id="collapsible-1">
        HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.</a>
  </div>

<a data-toggle="collapse" href="#collapsible-2">Radio</a>

  <div id="collapsible-2">
        HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.</a>
  </div>

我使用data-toggle boostrap来显示和隐藏元素，但是我有一些小问题，这样，当页面加载时，可折叠的内容总是可见的，即使我必须双击关闭元素，然后那工作正常。你认为我必须做什么，才能折叠元素内容以在页面加载时始终隐藏？

【问题讨论】：

标签： jquery css twitter-bootstrap accordion collapse

【解决方案1】：

取自Bootstrap's documentation：

用法
崩溃插件利用几个类来处理繁重的工作：

.collapse 隐藏内容
.collapse.in 显示内容
.collapsing 在过渡开始时添加，并在过渡结束时删除

简而言之：<div id="collapsible-1" class='collapse'>

【讨论】：

您是否按照我的建议将“collapse”类添加到您的 div 中？

【解决方案2】：

你需要像这样在div中添加collapse类默认隐藏内容

<a data-toggle="collapse" href="#collapsible-1">Digital</a>

  <div id="collapsible-1" class="collapse">
        HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.
  </div>

<a data-toggle="collapse" href="#collapsible-2">Radio</a>

  <div id="collapsible-2" class="collapse">
        HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages.
  </div>

Js Fiddle Demo

【讨论】：