jquery - Bootstrap : Opposite of collapse?

Question

我是 Bootstrap 的新手。我有一个可用的脚本，但我在修改它时遇到了问题。

脚本做了两件事:

1) 当您点击标题时，下面的 div 打开或关闭。

2) 当您单击标题时，标题旁边会显示两个字形之一，具体取决于您是打开还是关闭后面的 div。

换句话说，它的工作方式与维基百科的移动页面非常相似(例如 http://en.m.wikipedia.org/wiki/Mammal )。但是，维基百科页面上的 JS gizmos 默认情况下是打开的，而我想做的恰恰相反:默认设置应该只向访问者展示一列带有向下箭头(人字形向下字形)的标题。

这听起来很简单，但我尝试过的都不起作用。这是我的 HTML:

<div data-toggle="collapse" data-target="#target">
  <h2>
   <span class="only-collapsed glyphicon glyphicon-chevron-down"></span>
   <span class="only-expanded glyphicon glyphicon-remove-sign"></span>
   Test 1
  </h2>
</div>
<div id="target" class="collapse in">Hello, world!</div>

<div data-toggle="collapse" data-target="#target2">
  <h2>
   <span class="only-collapsed glyphicon glyphicon-chevron-down"></span>
   <span class="only-expanded glyphicon glyphicon-remove-sign"></span>
   Test 2
  </h2>
</div>
<div id="target2" class="collapse in">Hello, world!</div>

这是我的 CSS:

.only-collapsed { display: none; }
.collapsed .only-collapsed { display: inline; }
.collapsed .only-expanded { display: none; }

正如我所说，它就像维基百科的移动页面一样工作，但我希望我的文本 block 默认关闭。我可以通过用以下样式替换上面的 CSS 来成功地反转字形，但这不会影响 div 的包含文本:

.only-expanded /* Down Arrow */ { display: none; }
.collapsed .only-expanded { display: inline; }
.collapsed .only-collapsed { display: none; }

换句话说，默认设置是带有向下箭头的标题(好)，但文本在应该不可见的时候显示。

我认为折叠的反面必须是展开或打开，所以我使用这些术语通过 HTML 和 CSS 进行了修改，但没有成功。我忽略了一个非常简单的解决方案；谁能给我线索？

我发现@ Twitter bootstrap collapse: change display of toggle button 的讨论似乎非常好(并且可能是相关的)

但是，它似乎比我正在尝试做的要复杂一些。我还没有真正消化它。

无论如何，有人可以指出一个相对简单的解决方案吗？

编辑时:

我实现了 dim4web 的建议，并且效果更好，因为默认显示向下箭头并且不显示文本。唯一的问题是，当我单击标题并打开文本时，向下箭头仍然存在(应该用 X 代替)。

这是我的 HTML:

<div data-toggle="collapse" data-target="#target">
  <h2>
   <span class="only-collapsed glyphicon glyphicon-chevron-down"></span>
   <span class="only-expanded glyphicon glyphicon-remove-sign"></span>
  New Test
  </h2>
</div>
<div id="target" class="collapse">Hello, Universe!</div>

<div data-toggle="collapse" data-target="#target2">
  <h2>
   <span class="only-collapsed glyphicon glyphicon-chevron-down"></span>
   <span class="only-expanded glyphicon glyphicon-remove-sign"></span>
  New Test
  </h2>
</div>
<div id="target2" class="collapse">Hello, Universe 2!</div>

Answer 1

http://jsfiddle.net/qn6tsmwa/

1. 使用.collapse('hide')隐藏/关闭所有div.collapse
2. 使用 show.bs.collapse 和 hide.bs.collapse 隐藏或显示适当的图标

CSS:

.only-expanded {
    display:none
}

JQ:

$('.collapse').collapse('hide').on('show.bs.collapse', function (e) {
    var id = $(this).attr('id');
    $('div[data-target="#' + id + '"]').find('.only-expanded').show();
    $('div[data-target="#' + id + '"]').find('.only-collapsed').hide();

}).on('hide.bs.collapse', function () {
    var id = $(this).attr('id');
    $('div[data-target="#' + id + '"]').find('.only-expanded').hide();
    $('div[data-target="#' + id + '"]').find('.only-collapsed').show();
})