twitter-bootstrap Bootstrap：与崩溃相反？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/27471511/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Bootstrap: Opposite of collapse?
提问by David Blomstrom
I'm fairly new to Bootstrap. I have a script that works, but I'm having trouble modifying it.
我对 Bootstrap 相当陌生。我有一个有效的脚本，但我无法修改它。
The script does two things:
该脚本做了两件事：
1) When you click a header, the following div opens or closes.
1) 当您单击标题时，以下 div 将打开或关闭。
2) When you click a header, one of two glyphicons is displayed next to the header, depending on whether you're opening or closing the following div.
2) 当您单击标题时，标题旁边会显示两个字形之一，具体取决于您是打开还是关闭以下 div。
In other words, it works pretty much like Wikipedia's mobile pages (e.g. http://en.m.wikipedia.org/wiki/Mammal). However, the JS gizmos on Wikipedia's pages are open by default, while I want to do just the opposite: The default setting should present visitors with nothing but a column of headers accompanied by down arrows (chevron-down glyphicons).
换句话说，它的工作原理非常类似于维基百科的移动页面（例如http://en.m.wikipedia.org/wiki/Mammal）。然而，维基百科页面上的 JS 小工具默认是打开的，而我想做相反的事情：默认设置应该向访问者展示一列标题，并带有向下箭头（人字形向下的字形）。
It sounds simple, but nothing I've tried works. Here's my HTML:
这听起来很简单，但我尝试过的一切都不起作用。这是我的 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>
And here's my CSS:
这是我的 CSS：
.only-collapsed { display: none; }
.collapsed .only-collapsed { display: inline; }
.collapsed .only-expanded { display: none; }
As I said, it works just like Wikipedia's mobile page, but I want my text blocks CLOSED by default. I can successfully reverse the glyphicons by replacing the above CSS with the following styles, but it doesn't affect the div's containing text:
正如我所说，它就像维基百科的移动页面一样工作，但我希望我的文本块默认关闭。我可以通过用以下样式替换上面的 CSS 来成功反转字形，但它不会影响 div 的包含文本：
.only-expanded /* Down Arrow */ { display: none; }
.collapsed .only-expanded { display: inline; }
.collapsed .only-collapsed { display: none; }
In other words, the default setting is a header with a down arrow (good), but the text displays when it should be invisible.
换句话说，默认设置是带有向下箭头的标题（好），但文本在应该不可见时显示。
I figured the opposite of collapse must be expand or open, so I modified by HTML and CSS using those terms, without success. There must be a really simple solution that I'm overlooking; can anyone clue me in?
我认为折叠的反面必须是展开或打开，因此我使用这些术语通过 HTML 和 CSS 进行了修改，但没有成功。一定有一个我忽略的非常简单的解决方案；谁能给我线索？
I found what appears to be a really good (and presumably relevant) discussion @ Twitter bootstrap collapse: change display of toggle button
我发现似乎是一个非常好的（并且可能是相关的）讨论@ Twitter bootstrap collapse：更改切换按钮的显示
However, it appears to be a little more complicated than what I'm trying to do. I haven't been able to really digest it yet.
但是，它似乎比我想要做的要复杂一些。我还没有能够真正消化它。
At any rate, is there a relatively simple solution someone can point out?
无论如何，有人可以指出一个相对简单的解决方案吗？
ON EDIT:
编辑：
I implemented dim4web's suggestion, and it's working better in that the default shows a down arrow and no text display. The only problem is that when I click the header and the text opens, the down arrow remains (it should be replaced by an X).
我实施了dim4web 的建议，它的效果更好，因为默认显示向下箭头且不显示文本。唯一的问题是，当我单击标题并打开文本时，向下箭头仍然存在（它应该被 X 替换）。
This is my HTML:
这是我的 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>
回答by dm4web
- use
.collapse('hide')to hide/close alldiv.collapse - use
show.bs.collapseandhide.bs.collapseto hide or show up appropriate icons
- 用于
.collapse('hide')隐藏/关闭所有div.collapse - 使用
show.bs.collapse和hide.bs.collapse隐藏或显示适当的图标
CSS:
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();
})
回答by armstrong subero
Hmm, I think instead of explaining the answer to you, you can uncover it yourself, in this template you will find your answer:
嗯，我认为与其向你解释答案，你可以自己揭开它，在这个模板中你会找到你的答案：
http://startbootstrap.com/template-overviews/sb-admin/
http://startbootstrap.com/template-overviews/sb-admin/
Good luck!
祝你好运！
回答by j.doe
Opposite collapsed is: class="panel-collapse collapsed collapse show"
相反的折叠是： class="panel-collapse collapsed collapse show"
