7

jQueryでTwitter Bootstrapを使用しています。

ブートストラップのドキュメントによると、折りたたみ可能な要素をデフォルトで開きたい場合は、追加のクラス「in」を追加します。また、折りたたみ可能な要素をデフォルトで折りたたむ場合は、高さを 0px に設定します。

それはすべてうまく機能します。

メディアクエリを使用して、要素を大きな画面ではデフォルトとして開き、小さな画面ではデフォルトとして折りたたむように設定したいと思います（そして、クリックして両方を切り替えます）...

私のHTML：

<div class="accordion" id="accordion1">
 <div class="accordion-group">
  <div class="accordion-heading">
   Heading text.
   <a class="accordion-toggle" data-toggle="collapse" href="#collapseOne">
    (Click to show/hide)
   </a>
  </div>
  <div id="collapseOne" class="accordion-body collapse">
   <div class="accordion-inner">
    Lorem ipsum.
   </div>
  </div>
 </div>
</div>

私のCSS：

@media (min-width: 768px) {
    .collapse {
        height: auto;
    }
}
@media (max-width: 767px) {
    .collapse {
        height: 0px;
    }
}

これは、クリックし始めるまで問題なく機能します…</p>

767px より下の要素はデフォルトで折りたたまれており、要素の上はデフォルトで開いています。正しい。

767px 以下をクリックして要素を開くと、問題なく開きます。もう一度クリックすると非表示になります。すすいで繰り返します。正しい。

要素をクリックして折りたたむと、767 ピクセルを超えると要素が閉じますが、その後再び開きます。もう一度クリックすると閉じて、今度は閉じたままになります。もう一度クリックすると、正常に開きます。もう一度クリックすると、正常に閉じます。

そのため、何らかの理由で 767px を超えると (要素がデフォルトで開いている場合)、2 回のクリックで要素自体を再度開かずに折りたたんだままにしておくと、正常に動作します。

考え？

4

1 に答える 1

4

.inTwitter Bootstrap のアコーディオンは、それぞれの を展開/折りたたむためにクラスを検索するため、メディア クエリだけでこの種の動作を実現することはできません.accordion-body。

オプションは、ページの読み込み時にウィンドウの幅を検出し、Bootstrap の.collapse()メソッドを使用して表示/非表示を追加すること.accordion-bodyです。

$(function(){
    $(window).resize(function() {    // Optional: if you want to detect when the window is resized;
        processBodies($(window).width());
    });
    function processBodies(width) {
        if(width > 768) {
            $('.accordion-body').collapse('show');
        }
        else {
            $('.accordion-body').collapse('hide');
        }
    }
    processBodies($(window).width());
});

デモ: http://jsfiddle.net/grim/z2tNg/

于 2013-10-09T03:08:02.290 に答える