Question

我有一个打开面板的按钮，我希望能像关闭警报一样关闭它。

bootstrap docs的默认面板示例

<div class="panel panel-default">
  <div class="panel-heading">Panel heading without title</div>
  <div class="panel-body">
    Panel content
  </div>
</div>

如果我为面板标题添加了一个关闭警告的关闭按钮，该按钮仅删除标题。

Answer 1

您可以使用未记录的功能设置解雇操作的目标...

<button type="button" class="close" 
data-target="#id_of_panel" 
data-dismiss="alert">
<span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
</button>

这将使关闭按钮关闭面板而不是其父元素。

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

Answer 3

如果想要在可折叠面板中放置“关闭”按钮以折叠面板，您可以使用以下代码段：

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

Answer 4

好的，自提出这个问题以来已经过去了一段时间……同时，BS3面板在BS4中被所谓的卡所取代。在不使用任何自定义JavaScript且仅使用Bootstrap CSS类的情况下，实现可废弃卡的一种好方法是：card-header，the Bootstrap 4 Close Icon和negative margins（此处为.mt-n5）的组合在card-body上。关闭图标可以很好地定位在卡片标题内，负边距可将卡片内容更靠近标题区域。

<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">&times;</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，
亨森

Answer 5

对于不想关闭而是显示/隐藏的其他用户，data-toggle="collapse" 是关键。在下面的代码段中，您可以使用一个按钮来切换面板，面板本身也有切换按钮。

<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">&times;</span>
        <span class="sr-only">Close</span>
    </button>
    <div class="panel panel-primary">
      <div class="panel-body">Content Panel</div>
    </div>
  </div>

</body>

</html>

如何使用数据解除来解除引导面板？

5 个答案: