Question

我对Bootstrap很新。我有一个可行的脚本，但我无法修改它。

脚本做了两件事：

1）单击标题时，将打开或关闭以下div。

2）单击标题时，标题旁边会显示两个字形中的一个，具体取决于您是打开还是关闭以下div。

换句话说，它的工作方式与维基百科的移动网页非常相似（例如http://en.m.wikipedia.org/wiki/Mammal）。然而，维基百科页面上的JS小玩意默认是打开的，而我想做的恰恰相反：默认设置应该只向访问者提供一列标题，并附有向下箭头（V形符号字形）。

这听起来很简单，但我尝试过的都没有。这是我的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; }

正如我所说的，它就像维基百科的移动页面一样，但我希望我的文本块默认为CLOSED。我可以通过用以下样式替换上面的CSS来成功地反转glyphicons，但它不会影响包含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

但是，它似乎比我想做的要复杂一些。我还没能真正消化它。

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

ON EDIT：

我实现了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/

使用.collapse('hide')隐藏/关闭所有div.collapse
使用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();
})

Answer 2

嗯，我认为不是向你解释答案，你可以自己揭开它，在这个模板中你会找到答案：

http://startbootstrap.com/template-overviews/sb-admin/

祝你好运！

Answer 3

相反崩溃的是：class="panel-collapse collapsed collapse show"

Bootstrap：崩溃的对面？

3 个答案: