调用的引导数据切换的“活动状态”是什么

What's the "active state" for a Bootstrap data-toggle called?

本文关键字：活动状态 是什么 数据 调用      更新时间：2023-09-26

我正在尝试模仿维基百科移动页面上的功能。如果您访问 http://en.m.wikipedia.org/wiki/Mammal 并向下滚动到标题"区分特征"，然后单击它，您将看到向下箭头(V 形(变为向上箭头。

我通过跨度将两个选项插入我的标题中......

<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 中默认活动状态与非活动状态的名称是什么？

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>

相关文章：