javascript - Bootstrap 数据切换的 "active state"叫什么？

Question

我正在尝试模拟维基百科移动页面上的一项功能。如果您访问http://en.m.wikipedia.org/wiki/Mammal并向下滚动到标题“区分功能”，然后单击它，您会看到向下箭头(人字形)变为向上箭头。

我通过 span 将这两个选项插入到我的标题中......

<h2 id="where" class="H2Toggle" data-toggle="collapse" data- target=".Header2,.Where,#glyph2">
 <span class="glyphicon glyphicon1 glyphicon-chevron-down"></span>
 <span id="glyph2" class="glyphicon glyphicon2 glyphicon-remove-sign"></span>
</h2>

然后我添加了一个 CSS 样式 - span#glyph2 { display: none;

现在默认只显示第一个跨度，但是当我单击标题时，两个跨度都会显示。所以我需要弄清楚如何让第一个跨度在我单击标题时不显示，然后在我再次单击它时重新出现。

我可以针对特定的屏幕尺寸执行此操作。例如，如果屏幕宽度为 1,000 像素或更宽，我可以使一个跨度或另一个跨度出现或不出现。但我需要一种 CSS 样式(或 JavaScript 函数)，它可以根据标题是否被单击来使字符出现/消失。

所以我想我要问的是“Bootstrap 中默认事件状态与非事件状态的名称是什么？”

Answer 1

当它控制的元素折叠时，Bootstrap 会将 collapsed 类应用于触发器。否则，不应用此类。您可以使用它来编写适当的 CSS 规则。

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

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

<div data-toggle="collapse" data-target="#target">Header <span class="only-collapsed">Expand</span> <span class="only-expanded">Collapse</span></div>
<div id="target" class="collapse in">Hello, world!</div>