How can I dismiss a bootstrap panel using data-dismiss?

问题

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

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

回答1:

You can do this by using an undocument feature to set the target of the dismiss action...

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

This will make the close button close the panel as opposed to its parent element.

回答2:

I used Bootstrap version 3 and 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 class="panel-collapse collapse in" id="id_panel" aria-expanded="true">
...content
</div>

回答3:

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>

来源：https://stackoverflow.com/questions/25367356/how-can-i-dismiss-a-bootstrap-panel-using-data-dismiss

标签

javascript

twitter-bootstrap

panel