堆棧內存溢出
  簡體   English   中英

如何使用 data-dismiss 關閉引導面板？

[英]How can I dismiss a bootstrap panel using data-dismiss?

 原文  2014-08-18 15:55:51  3   5    javascript/ twitter-bootstrap/ panel

問題描述

我有一個按鈕可以打開一個面板，我希望能夠像使用警報一樣關閉它。

bootstrap 文檔中的默認面板示例

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

如果我為面板標題的警報添加了一個關閉按鈕，則該按鈕只會刪除標題。

5 個解決方案

解決方案1
 34 已采納  2014-08-18 15:55:51

您可以通過使用 undocument 功能來設置解除操作的目標...

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

這將使關閉按鈕關閉面板而不是其父元素。

解決方案2
 3  2016-08-22 23:28:30

我使用了 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>

解決方案3
 1  2017-09-27 21:35:56

那些想要在可折疊面板內放置一個“關閉”按鈕以折疊面板的人，您可以使用以下代碼段： 

 <!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
 0  2020-11-02 14:54:01

好的，自從提出這個問題以來已經過去了一段時間……與此同時，BS3 面板已在 BS4 中被所謂的卡所取代。 在沒有任何自定義 JavaScript 且僅使用 Bootstrap CSS 類的情況下實現可關閉卡片的一種好方法是：將card-header 、 Bootstrap 4 關閉圖標和card-body上的負邊距（此處為.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">&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 中的實際關閉事件。

在 JSFiddle 上查看演示...

哈，
漢森

解決方案5
 0  2021-05-24 04:11:53

對於不想關閉而是顯示/隱藏的其他用戶，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>

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Data-Dismiss：如何在 function 中關閉引導模式 了解 data-dismiss 屬性在 Bootstrap 中的工作原理 Bootstrap Alerts Data-Dismiss 不起作用 離子JavaScript數據刪除引導模態不起作用 單擊數據關閉按鈕時如何清除引導模式中的所有輸入字段？ bootstrap data-dismiss =“警報”-並重定向其他頁面 Twitter BootStrap 3中的data-dismiss和hide（API）有什么區別 我如何對data-dismiss =“ modal”有兩種影響；一種是重新加載父頁面，另一種是不加載 “數據刪除”自舉程序模式Bugando，位置=“絕對” 當主容器上有data-dismiss =&#39;modal&#39;並且按下按鈕以展開內部面板時，如何保持模式不關閉
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM