twitter-bootstrap - ヘッダーdivをクリックしたときにBootstrapアコーディオンを折りたたむ方法は?

Question

Bootstrap アコーディオンでは、テキストをクリックする代わりに、 diva内の任意の場所をクリックすると折りたたまれるようにしたいと考えています。panel-heading

Bootstrap 3 を使用しています。つまり、アコーディオンではなく、折りたたみ可能なパネルです。パネル全体をクリック可能にする方法はありますか?

score 70 · Accepted Answer

別の方法は、<a>のすべてのスペースを完全に埋めることpanel-headingです。これを行うには、次のスタイルを使用します。

.panel-title a {
    display: block;
    padding: 10px 15px;
    margin: -10px -15px;
}

このデモを確認してください ( http://jsfiddle.net/KbQyx/ )。

次に、見出しをクリックすると、実際にはをクリックしてい<a>ます。

score 13 · Accepted Answer

grim の jsfiddle にいくつかの小さな欠陥があることに気付きました。

パネル全体でポインターを手の形に変更するには、次のようにします。

.panel-heading {
   cursor: pointer;
}

<a>タグ (スタイルの問題) を削除し、ずっと続けdata-toggle="collapse" data-parent="#accordion" data-target="#collapse..."てpanel-headingいます。

font-awesome.cssjsfiddleで使用して、シェブロンを表示するための CSS メソッドを追加しました。

score 1 · Accepted Answer

実際、私のパネルにはこの折りたたみ状態の矢印アイコンがあり、この投稿で他の回答を試しましたが、アイコンの位置が変更されたため、ここに折りたたみ状態の矢印アイコンを使用したソリューションがあります。

このカスタム CSS を追加します

 .panel-heading 
  {
   cursor: pointer;
   padding: 0;
  }

 a.accordion-toggle 
 {
  display: block;
  padding: 10px  15px;
 }

クレジットはこの投稿回答者に送られます。

希望が役立ちます。

7 に答える 7