twitter-bootstrap 如何使用 data-dismiss 关闭引导面板？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/25367356/
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
How can I dismiss a bootstrap panel using data-dismiss?
提问by Relequestual
I have a button which opens a panel and I want to be able to close it like I would with an alert.
我有一个按钮可以打开一个面板，我希望能够像使用警报一样关闭它。
The Default panel example from bootstrap docs
bootstrap 文档中的默认面板示例
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
If I add a close button as documented for an alert to the panels header, the button removes the header only.
如果我为面板标题的警报添加了一个关闭按钮，则该按钮只会删除标题。
回答by Relequestual
You can do this by using an undocument feature to set the target of the dismiss action...
您可以通过使用 undocument 功能来设置解除操作的目标来做到这一点...
<button type="button" class="close"
data-target="#id_of_panel"
data-dismiss="alert">
<span aria-hidden="true">×</span><span class="sr-only">Close</span>
</button>
This will make the close button close the panel as opposed to its parent element.
这将使关闭按钮关闭面板而不是其父元素。
回答by jorghelouiz
I used Bootstrap version 3 and fontAwesome.
我使用了 Bootstrap 版本 3 和 fontAwesome。
<div class="panel panel-default">
<div class="panel-heading"><a data-toggle="collapse" href="#id_panel" aria-expanded="true">
<div class="panel-title">
<i class="fa fa-th-list" aria-hidden="true"></i> Formulario
<i class="fa fa-minus-square pull-right" aria-hidden="true"></i>
<i class="fa fa-plus-square pull-right" aria-hidden="true"></i>
</div>
</a></div></div>
And your content div.
还有你的内容 div。
<div class="panel-collapse collapse in" id="id_panel" aria-expanded="true">
...content
</div>
回答by Onur Omer
Those who wants to place a "close" button inside the collapsible panel to collapse panel back, you can use following snippet:
那些想要在可折叠面板内放置一个“关闭”按钮以折叠面板的人，您可以使用以下代码段：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Collapsible Panel</h2>
<p>Click on the collapsible panel to open and close it.</p>
<div class="panel-group">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" href="#collapse1">Collapsible panel</a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">Panel Body</div>
<div class="panel-footer">
<button type="button" data-target="#collapse1" data-toggle="collapse">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>