Question

我正试图在维基百科的移动页面上模拟一个功能。如果您访问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; }

现在默认只显示第一个范围，但是当我点击标题时，BOTH跨度显示。因此，当我单击标题时，我需要弄清楚如何使第一个跨度不显示，然后再次单击它时重新出现。

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

所以我猜我所问的是“Bootstrap中默认活动与非活动状态的名称是什么？”

Answer 1

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

＆＃13;

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

＆＃13;

<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>

＆＃13;

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

1 个答案: