8

私はブートストラップ2.2.1を使用していますが、何らかの理由でdata-parent属性が意図したとおりに機能していません。別のターゲットをクリックしても、以前に開いたターゲットは閉じません。これが以下のコードのフィドルです、これを修正する方法についてのアイデアはありますか？

<div id="accordion">
    <ul>
        <li>
            <a href="#" data-toggle='collapse' data-target='#document', data-parent='#accordion'>option 1</a>
            <ul id="document" class="collapse">
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
            </ul>   
        </li>
        <li>
            <a href="#">option 2</a>
        </li>
        <li>
            <a href="#">option 3</a>
        </li>
         <li>
            <a href="#" data-toggle='collapse' data-target='#document2', data-parent='#accordion'>option 4</a>
            <ul id="document2" class="collapse">
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
                <li> <a href="#">suboption 1</a></li>
            </ul>   
        </li>
    </ul>
</div>
4

4 に答える 4

9

BootstrapDocumentsには次のように書かれています。

セレクターが指定されている場合、この折りたたみ可能なアイテムが表示されると、指定された親の下にあるすべての折りたたみ可能な要素が閉じられます。（従来のアコーディオンの動作と同様-これは panelクラスによって異なります）

したがって、パネルグループで使用する必要がありますが、とにかくjavascriptをオーバーライドできます。

http://getbootstrap.com/javascript/#collapse-options

于 2014-03-08T01:32:38.087 に答える
7

私もこれを機能させることができませんでした-これは、divではなくリストを使用しているという事実に関連するBootstrap JSの何かである可能性がありますか？

そのため、それを機能させるには、クリックイベントをオーバーライドする必要がありました。ここでのこの質問に基づく：折りたたみ可能なアコーディオンはdropdpwn-menuBootstrap内では機能しません

各オプションリンクにクラスを追加し、accordion-toggleそれを機能させるために次のJavaScriptを追加しました。

$(document).on('click', '.accordion-toggle', function(event) {
        event.stopPropagation();
        var $this = $(this);

        var parent = $this.data('parent');
        var actives = parent && $(parent).find('.collapse.in');

        // From bootstrap itself
        if (actives && actives.length) {
            hasData = actives.data('collapse');
            //if (hasData && hasData.transitioning) return;
            actives.collapse('hide');
        }

        var target = $this.attr('data-target') || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, ''); //strip for ie7

        $(target).collapse('toggle');
});​

このフィドルは、実際の動作を示しています。

于 2012-12-02T12:37:50.127 に答える
7

ブートストラップの崩壊にも苦労してきました。私は少し違うことをしようとしていました。インライントグル動作が必要でした。以下の私のJSフィドルを参照してください。私が見つけたのは、ブートストラップには、ドキュメントでカバーされているdata-parent属性に加えて、「accordion-group」divの存在が必要なようです。したがって、JSにバグがあるか、ドキュメントにバグが含まれていません。また、アコーディオングループのdivのスタイルをゼロにする必要がありました...

http://jsfiddle.net/cssguru/SRFFJ/

<div id="accordion2">
   <div class="accordion-group" style="border:0;padding:0;margin:0">
      <div id="collapseOne" class="collapse in">
            Foo Bar...
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseTwo">
               Show Herp Derp
            </a>
      </div>
      <div id="collapseTwo" class="collapse">
            Herp Derp...
            <a data-toggle="collapse" data-parent="#accordion2" href="#collapseOne">
               Show Foo Bar
            </a> 
      </div>
   </div>
</div>
于 2013-03-25T19:47:16.330 に答える
5

アイテムでアコーディオングループクラスを使用する必要があります。問題https://github.com/twitter/bootstrap/issues/4988を参照してください。

于 2013-04-08T14:41:44.143 に答える