1

これはブートストラップ Web サイトとほぼ同じであるため、何が問題なのかわかりません。

最初の要素 (リスト A) をクリックすると、ほとんど壊れてしまいます。他の要素は問題ありませんが、リスト A をクリックすると壊れます。

<div class="accordion" id="notification_types">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#a">List A</a>
        </div>

        <div class="accordion-body collapse" id="a" style="height: 0px;">
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#b">List B</a>
        </div>

        <div class="accordion-body collapse" id="b" style="height: 0px;">
            <div class="accordion-inner" dir="auto" id="a123">
                <a data-method="get" data-remote="true" href="/123">123</a>
            </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#c">List C</a>
        </div>

        <div class="accordion-body collapse" id="c" style="height: 0px;">
            <div class="accordion-inner" dir="auto" id="a456">
                <a data-method="get" data-remote="true" href="/456">456</a>
            </div>
        </div>
    </div>
</div>

私はjsfiddleで例を作りました - http://jsfiddle.net/uycBa/157/ テストするときは、Aを押すとすべてが壊れるので、前にリストBまたはCを押してください...

ここで何が問題なのですか？

4

2 に答える 2

2

最初のアコーディオン本体に div を追加するとうまくいきました。この理由が見つかりませんでした。

<div class="accordion" id="notification_types">
    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#a">List A</a>
        </div>

        <div class="accordion-body collapse" id="a" style="height: 0px;">
           <div class="accordion-inner">  
           </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#b">List B</a>
        </div>

        <div class="accordion-body collapse" id="b" style="height: 0px;">
            <div class="accordion-inner" dir="auto" id="a123">
                <a data-method="get" data-remote="true" href="/123">123</a>
            </div>
        </div>
    </div>

    <div class="accordion-group">
        <div class="accordion-heading">
            <a class="accordion-toggle" data-parent="#notification_types"
            data-toggle="collapse" href="#c">List C</a>
        </div>

        <div class="accordion-body collapse" id="c" style="height: 0px;">
            <div class="accordion-inner" dir="auto" id="a456">
                <a data-method="get" data-remote="true" href="/456">456</a>
            </div>
        </div>
    </div>
</div>
于 2013-02-24T19:26:50.497 に答える
1

既知のエラー: https://github.com/twitter/bootstrap/issues/5849

最初の折りたたみ可能なものに高さがないため、トランジションがプラグインをブロックしています:

プラグインはトランジション状態で、トランジションが終了するのを待っていますが、要素の高さが 0 であるため、トランジションは開始されず、終了しません (そう思う)。この状態のとき、プラグインは何もしません。

遷移を無効にすると表示されます: http://jsfiddle.net/Sherbrow/uycBa/158/

イベントを呼び出すことpreventDefault()でこれを止めることができます:show

$('.accordion-body.empty').on('show', function(event) {
    event.preventDefault();
});

(empty空のアコーディオン本体を見つけるためにマークアップにも追加されます)

デモ: http://jsfiddle.net/Sherbrow/uycBa/159/

于 2013-02-24T19:40:43.210 に答える