如何使用数据关闭来关闭引导面板？
Posted
技术标签:
【中文标题】如何使用数据关闭来关闭引导面板？【英文标题】：How can I dismiss a bootstrap panel using data-dismiss? 【发布时间】：2014-10-11 14:32:03 【问题描述】：我有一个打开面板的按钮，我希望能够像使用警报一样关闭它。
引导文档中的默认面板示例
<div class="panel panel-default">
<div class="panel-heading">Panel heading without title</div>
<div class="panel-body">
Panel content
</div>
</div>
如果我为面板标题添加了一个关闭按钮（如文档所述），则该按钮只会删除标题。
【问题讨论】：
【参考方案1】：您可以通过使用 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>
这将使关闭按钮关闭面板而不是其父元素。
【讨论】：
【参考方案2】：我使用了 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>
还有你的内容 div。
<div class="panel-collapse collapse in" id="id_panel" aria-expanded="true">
...content
</div>
【讨论】：
请尽量在答案中更清楚一点，特别是解释你为什么会这样，例如为什么这解决了 OP 中提出的问题，而不仅仅是分享你的代码。 ***.com/help/how-to-answer 是一个很好的指南【参考方案3】：想要在可折叠面板内放置“关闭”按钮以将面板向后折叠，可以使用以下sn-p：
<!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>【讨论】：
【参考方案4】：好的，自从提出这个问题以来已经过去了一段时间......与此同时，BS4 中的 BS3 面板已被所谓的卡片所取代。以下是在没有任何自定义 javascript 且仅使用 Bootstrap CSS 类的情况下实现可关闭卡片的好方法：card-body 上的 card-header、the Bootstrap 4 Close Icon 和 negative margins（此处为 .mt-n5）的组合。关闭图标很好地定位在卡片标题中，负边距将卡片内容拉近标题区域。
<div class="container">
<div id="closeablecard" class="card card-hover-shadow mt-4">
<div class="card-header bg-transparent border-bottom-0">
<button data-dismiss="alert" data-target="#closeablecard" type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="card-body mt-n5">
<h5 class="card-title">Your Title</h5>
<p class="card-text">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatem recusandae voluptate porro suscipit numquam distinctio ut. Qui vitae, ut non inventore necessitatibus quae doloribus rerum, quaerat commodi, nemo perferendis ab.
</p>
<a href="#" class="card-link">Card link</a>
<a href="#" class="card-link">Another link</a>
</div>
</div>
</div>
要真正关闭卡片，我们可以使用 BS4 Data-API 并将以下数据属性放在按钮标签中：data-dismiss="alert" data-target="#closeablecard"。
data-target 是我们卡片的 ID，data-dismiss=alert 会触发 Bootstrap 中的实际关闭事件。
See a Demo on JSFiddle...
HTH， 汉森
【讨论】：
【参考方案5】：对于其他不想关闭但显示/隐藏的用户，data-toggle="collapse" 是关键。在下面的sn-p中，您可以使用一个按钮来切换面板，并且面板本身具有切换按钮。
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<html>
<body>
<button type="button" class="btn-text" data-toggle="collapse" data-target="#helpCollapsePanel">
<i class="fa fa-info-circle"/> Click to Open
</button>
<div class="collapse" id="helpCollapsePanel" style="width:250px;">
<button type="button" class="close" style="margin-right: 5px;" data-toggle="collapse" data-target="#helpCollapsePanel">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<div class="panel panel-primary">
<div class="panel-body">Content Panel</div>
</div>
</div>
</body>
</html>【讨论】：
以上是关于如何使用数据关闭来关闭引导面板？的主要内容，如果未能解决你的问题，请参考以下文章