jquery - 開いたまま - bootstrap4 アコーディオン




Bootstrap 3 Chevronアイコンで状態を折りたたむ (10)

Collapseの Bootstrap 3 Javascriptの例ページから抜粋したコアの例を使用して、シェブロンアイコンを使用して折り畳みの状態を表示することができました。

私はこれを使用して作業している:

$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

これはうまくいきます(すべてのブラウザで完全にテストされているわけではありません)が、もっと洗練されたソリューションがあるのでしょうか?

理想的には、コア関数を使用したいと思いますが、同じ結果をどのように達成するかはわかりません。

$('#accordion').on('hidden.bs.collapse', function () {
    //do something...
})

ここにjsfiddle動作するバージョンがjsfiddleます。


Angularは、ここでJavaScriptベースのアプローチ(少なくとも私が試したもの)に問題を引き起こすようです。 私はこの解決策をここに見つけました: http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang : http://www.codeproject.com/Articles/987311/Collapsible-Responsive-Master-Child-Grid-Using-Ang 。 その要点は、toggleボタンをdata-ng-clickして、 $scopeコンテキストを使ってコントローラ内のボタンを変更するメソッドを作ることです。

私はより詳細を提供することができると思う...私のボタンは、彼らが崩壊したdivの初期状態のグリフコンに設定されています(glyphicon-chevron-right == collapsed div)。

page.html:

<div class="title-1">
    <button data-toggle="collapse" data-target="#panel-{{ p_idx }}" class="dropdown-toggle title-btn glyphicon glyphicon-chevron-right" data-ng-click="collapse($event)"></button>
</div>
<div id="panel-{{ p_idx }}" class="collapse sect">
    ...
</div>

controllers.js:

.controller('PageController', function($scope, $rootScope) {
    $scope.collapse = function (event) {
        $(event.target).toggleClass("glyphicon-chevron-down glyphicon-chevron-right");
    };
)

Bludreamの答えの改善:

あなたは間違いなくFontAwesomeを使うことができます!

「折りたたみ」と「パネル見出し」クラスを必ず含めてください。 パネルをクリックするまで「折りたたまれた」クラスは含まれていないので、正しいシェブロンを表示するために「折り畳まれた」クラスを含める必要があります(折りたたまれている場合はシェブロンの右が表示され、シェブロンの場合は開いています)。

HTML

<div class="panel panel-default">
    <div class="panel-heading collapsed" data-toggle="collapse" data-target="#collapseOrderItems1">Products 1 <i class="chevron fa fa-fw" ></i></div>
    <div class="collapse" id="collapseOrderItems1">
        <p>Lorem ipsum...</p>
    </div>
</div>

CSS

.panel-heading .chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .chevron:after {
    content: "\f054";   
}   

また、既存のクラスを使用する代わりに新しいクラスを作成することをお勧めします。

たとえば、Codepenを参照してください。http://codepen.io/anon/pen/PPxOJX


ここでは、あなたのhtmlでどんな種類のトグルコンテンツを扱うことができる、純粋なCSSヘルパークラスの2つです。

それはあなたが切り替える必要がある任意の要素で動作します。 どのようなレイアウトであれ、トグル要素内の.if-collapsedおよび.if-collapsedクラスを持つ要素の中に配置するだけです。

唯一の捉え方は、トグルの初期状態を確実に入れなければならないということです。 最初に閉じていた場合は、 折りたたまれたクラスをトグルに配置します。

:notセレクタが必要です。IE8では動作しません。

HTMLの例:

<a class="btn btn-primary collapsed" data-toggle="collapse" href="#collapseExample">
  <!--You can put any valid html inside these!-->
  <span class="if-collapsed">Open</span>
  <span class="if-not-collapsed">Close</span>
</a>
<div class="collapse" id="collapseExample">
  <div class="well">
    ...
  </div>
</div>

少ないバージョン:

[data-toggle="collapse"] {
    &.collapsed .if-not-collapsed {
         display: none;
    }
    &:not(.collapsed) .if-collapsed {
         display: none;
    }
}

CSSのバージョン:

[data-toggle="collapse"].collapsed .if-not-collapsed {
  display: none;
}
[data-toggle="collapse"]:not(.collapsed) .if-collapsed {
  display: none;
}

この種のコードを使うことができます:

function toggleChevron(e) {
    $(e.target)
        .prev('.panel-heading')
        .find('i.indicator')
        .toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
}
$('#accordion').on('hidden.bs.collapse', toggleChevron);
$('#accordion').on('shown.bs.collapse', toggleChevron);

=>作業中のJsFiddle


パネルのみで(アクセントではない)これを使用しようとする場合は、次のコードを試してください:

<div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
            <a class="collapse-toggle" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">Panel heading with title</a>
        </h4>
    </div>
    <div id="collapseExample" class="panel-collapse collapse in">
        <div class="panel-body">
            Panel content
        </div>
    </div>
</div>

ワンライナー。

i.fa.fa-chevron-right.collapse.in { transform: rotate(180deg); }

この例では、折りたたみ可能なテーブル行をグループ化するために使用されています。 あなたが行う必要があるのは、ターゲットクラス名(my-collapse-name)をアイコンに追加することだけです。

<tr data-toggle="collapse" data-target=".my-collapse-name">
    <th><i class="fa fa-chevron-right my-collapse-name"></span></th>
    <th>Master Row - Title</th>
</tr>
<tr class="collapse my-collapse-name">
    <td></td>
    <td>Detail Row - Content</td>
</tr>

<span class='caret my-collapse-name'></span>span.caret.collapse.in { transform: rotate(90deg); }を使用して、Bootstrapのネイティブキャレットクラスでも同じことができspan.caret.collapse.in { transform: rotate(90deg); } span.caret.collapse.in { transform: rotate(90deg); }


次のHTML( ブートストラップ3の例から):

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript" ></script>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" type="text/javascript" ></script>

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion" href="#collapseOne">
          Collapsible Group Item #1
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
          Collapsible Group Item #2
        </a>
      </h4>
    </div>
    <div id="collapseTwo" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a class="accordion-toggle collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
          Collapsible Group Item #3
        </a>
      </h4>
    </div>
    <div id="collapseThree" class="panel-collapse collapse">
      <div class="panel-body">
        Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
      </div>
    </div>
  </div>
</div>

視覚効果:


私は素晴らしいフォントを使用しています! パネルを折りたたみたい

        <div class="panel panel-default">
                <div class="panel-heading" data-toggle="collapse" data-target="#collapseOrderItems"><i class="fa fa-chevron fa-fw" ></i> products</div>

                <div class="collapse in" id="collapseOrderItems">
                            ....
                </div>
        </div>

とのCSS

.panel-heading .fa-chevron:after {
    content: "\f078";   
}
.panel-heading.collapsed .fa-chevron:after {
    content: "\f054";   
}


私はテンプレートを介してオンザフライで追加されたhtmlを崩壊させて拡張したいと思っていたので、純粋なhtmlアプローチが欲しかった! 私はこれを思いついた...

https://jsfiddle.net/3mguht2y/1/

var noJavascript = ":)";

それは誰かに使用するかもしれない:)


簡単な例の作業

  • 体の状態を表示/非表示にする
  • 親のattに行く
  • 検索アイコンを取得する
  • 変更アイコン

シンプルに入る

HTML

<body>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#jai">Jai</a>
        </div>
        <div id="jai" class="accordion-body collapse in">
            <div>
                <div class="accordion-inner">body content 1</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">jai2</a>
        </div>
        <div id="collapseTwo" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 2</div>
            </div>
        </div>
    </div>
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#accordion2" href="#collapse3">jai3</a>
        </div>
        <div id="collapse3" class="accordion-body collapse">
            <div>
                <div class="accordion-inner">body content 3</div>
            </div>
        </div>
    </div>
</body>

JavaScript

$('div.accordion-body').on('shown', function () {
    $(this).parent("div").find(".icon-chevron-down")
           .removeClass("icon-chevron-down").addClass("icon-chevron-up");
});

$('div.accordion-body').on('hidden', function () {
    $(this).parent("div").find(".icon-chevron-up")
           .removeClass("icon-chevron-up").addClass("icon-chevron-down");
});




twitter-bootstrap-3