7

Bootstrap 2.3.2 を使用して、ページがロードされたときに開いている単一のパネルを持つアコーディオンがあります。

          <div class="accordion" id="refine">
              <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
                  Title
                </a>
              </div>
              <div id="refine-search" class="accordion-body collapse in">
                <div class="accordion-inner">
                  Test text....
                </div>
              </div>
          </div>

サイトは完全にレスポンシブです。モバイル画面サイズ [ @media (max-width: 979px) ] に切り替えると、アコーディオン パネルが自動的に閉じます。つまり、実質的に div の絞り込み検索行を「折りたたむ」に変更します。

モバイルモードの場合、アコーディオンは引き続き機能する必要があります。たとえば、ユーザーがアコーディオンの見出しをクリックするとパネルが展開されるため、.hidden-desktop ユーティリティクラスなどを使用して重複した div でパネルをオフにしたくありません。

私は答えを求めて高低を検索しました - 誰か助けてくれますか?

4

4 に答える 4

13

それで、私は最終的にこれを行う方法を見つけ出し、それが誰かの助けになる場合に備えて投稿しました。

HTML を次のように変更します。

<div class="accordion" id="refine">

    <div class="hidden-phone">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
                <legend>
                    <h2>Refine your search</h2></legend>
            </a>
        </div>
    </div>

    <div class="visible-phone">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-toggle="collapse" data-parent="#refine" href="#refine-search">
                <legend>
                    <h2>Refine your search (press to reveal)</h2></legend>
            </a>
        </div>
    </div>

    <div id="refine-search" class="accordion-body collapse in">

        <div class="accordion-inner">

            Test text....
        </div>

    </div>

</div>

そして、このJSをファイルで使用します。

$(window).bind('resize load', function() {
    if ($(this).width() < 767) {
        $('#refine-search').removeClass('in');
        $('#refine-search').addClass('out');
    } else {
        $('#refine-search').removeClass('out');
        $('#refine-search').addClass('in');
    }
});
于 2013-08-30T11:38:43.497 に答える
7

Bootstrap 3.x の場合、これはサンプル コードを変更することなくうまく機能しました。

$(window).bind('resize load', function() {
    if ($(this).width() < 767) {
        $('.collapse').removeClass('in');
        $('.collapse').addClass('out');
    } else {
        $('.collapse').removeClass('out');
        $('.collapse').addClass('in');
    }
});
于 2014-03-13T19:51:22.280 に答える