jquery - 折りたたみ時の Twitter ブートストラップ 3.0 アイコンの変更

Question

これは Bootstrap 3.0 に関するものです。折りたたみ時にアイコン/グリフィコンを変更したいと思います。つまり、閉じたフォルダから開いたフォルダへ。

私は広範囲に検索し、ここで SO のスレッドを読みましたが、役に立ちませんでした。このスレッドは近かったし、基本的に私が欲しいものです。Bootstrap 3 で動作させるにはどうすればよいですか?

Answer 1

Bootstrap 3 では、collapseイベントの処理が異なります。現在は次のようになります。

$('#collapseDiv').on('shown.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-folder-close").addClass("glyphicon-folder-open");
});

$('#collapseDiv').on('hidden.bs.collapse', function () {
   $(".glyphicon").removeClass("glyphicon-folder-open").addClass("glyphicon-folder-close");
});

デモ: http://www.bootply.com/73101

Answer 2

このコードは、'Accordion' という ID を持つアコーディオンを見つけます。表示されたイベントが折りたたまれたパネルで発生すると、ヘッダー パネル (前の要素) でアイコンが検出され、その HTML コード ブロック内のグリフ アイコン要素が検出されて変更されます。

$('#accordion .panel-collapse').on('shown.bs.collapse', function () {
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-right").addClass("glyphicon-chevron-down");
});

//The reverse of the above on hidden event:

$('#accordion .panel-collapse').on('hidden.bs.collapse', function () {
    $(this).prev().find(".glyphicon").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-right");
});

Answer 3

ブートストラップ折りたたみのプラス記号とマイナス記号のボ​​タン。

HTML

<div>
  <a data-toggle="collapse" href="#other">
    <h3>Others<span class="pull-right glyphicon glyphicon-plus"></span></h3>
  </a>
  <div id="other" class="collapse">
    <h1>Others are</h1>
  </div>
</div>

Javascript

$(document).ready(function () {
     $('.collapse')
         .on('shown.bs.collapse', function() {
             $(this)
                 .parent()
                 .find(".glyphicon-plus")
                 .removeClass("glyphicon-plus")
                 .addClass("glyphicon-minus");
             })
         .on('hidden.bs.collapse', function() {
             $(this)
                 .parent()
                 .find(".glyphicon-minus")
                 .removeClass("glyphicon-minus")
                 .addClass("glyphicon-plus");
             });
         });

Answer 4

これは、デフォルトの bootstrap.js 折りたたみ実装に依存する CSS ベースのソリューションです。追加の HTML マークアップは必要ありません (もちろん、Font-Awesome をグリフィコンに自由に置き換えてください)。

<style>
    .panel-title > a:before {
        font-family: FontAwesome;
        content: "\f07c";
        padding-right: 5px;
    }
    .panel-title > a.collapsed:before {
        content: "\f07b";
    }
</style>

デモ (ブートストラップ 3.3.7):

デモ (Bootstrap 4.0 / Font Awesome 5 CSS):

Answer 5

ID の代わりにクラスをターゲットとして使用することもできます。

 <a data-toggle="collapse" href=".details">
     <div class="details collapse in">Show details</div> 
     <div class="details collapse">Hide details</div> 
 </a>
 <div class="details collapse">
 ...
 </div>

Answer 6

これが私の解決策です：

$('.navbar-toggle').on('click', function() {
    $(this).toggleClass('mobile-close');
})

デフォルトのアイコン バーを非表示:

.mobile-close span {
  display: none !important;
}

次に、次のような mobile-close のスタイルを設定できます。

.navbar-toggle.mobile-close {    
  cursor: pointer;
  width: 42px;
  height: 32px;
  line-height: 40px;
}
.navbar-toggle.mobile-close:before {
  content: "×";
  font-size: 40px;
  color: #231f20;
 }

Answer 7

これは、ブートストラップの崩壊に対してうまく機能します:

<script>
    $(document).ready(function () {
        $('#collapseExample').on('hidden.bs.collapse', function () {
            $("#btnDown").removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
            })
        $('#collapseExample').on('shown.bs.collapse', function () {
            $("#btnDown").removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
            })
        });
</script>

これは私が使用しているHTMLコードです:

<div class="collapse" id="collapseExample">
     <div class="well">
     ...
     </div>
</div>
<button class="btn btn-default" type="button" data-toggle="collapse" data-         target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
     <span id="btnDown" class="glyphicon glyphicon-chevron-down"></span>
     Settings
</button>