0

(スタイル設定された) Bootstrap タブを使用します

Bootstrap タブをもう一度クリックしたときに閉じたい。

部分的に機能します。対応するパネルを閉じることはできますが、タブの「アクティブ」クラスを切り替えたい場合、スクリプトが機能しません。

私のJSコード：

$('[data-toggle=tab]').click(function(e){
    if($(this).parent().hasClass('active')){
        e.preventDefault();

        // toggle 'active' tab class (styling)
        $(this).parent().toggleClass('active');

        // toggle 'active' panel class (hide it)
        $($(this).attr("href")).toggleClass('active');
    }
})

すべてのコード (html、css、js) はここに表示されます: https://jsfiddle.net/j9stkqf6/1/

コメントする場合:

$(this).parent().toggleClass('active');

パネルが隠れています

ステップ/ステップデバッグモードも試しましたJS関数の終わりまですべて正常に動作し、すべて再表示されます（tab.activeクラスとパネル）

タブをもう一度クリックしたときに、パネルを閉じてタブの「アクティブ」クラスを切り替えるのを手伝ってもらえますか。

ありがとう ！

4

2 に答える 2

2

最後に、私はそれを機能させました:

「e.preventDefault()」に加えて「e.stopPropagation()」を Javascript に追加する必要がありました

「e.preventDefault()」は、そのイベントで Bootstrap からのアクションを停止します (A リンクをクリックします)。

'e.stopPropagation()' は Bootstrap からの他のアクションを回避します (LI のクリックをキャッチ)

参照。e.preventDefault() と e.stopPropagation()

$('[data-toggle=tab]').click(function(e){
    if($(this).parent().hasClass('active')){

    e.preventDefault();
    e.stopPropagation();

        $(this).parent().removeClass('active');

        $($(this).attr("href")).removeClass('active');
        $($(this).attr("href")).removeClass('in');

        $(this).attr("aria-expanded", false);
    }
})

ここで私の作業例を見ることができます: https://jsfiddle.net/j9stkqf6/10/

于 2016-10-11T10:37:49.587 に答える
0

ここにあなたを助ける添付のデモがあります

方法 1

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
    <div class="panel panel-info">
        <div class="panel-heading " role="tab" id="headingOne">
            <h4 class="panel-title">
                <a role="button" data-toggle="collapse" data-parent="#accordion" href="#per" aria-expanded="true" aria-controls="collapseOne">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 1</strong>
                </a>
            </h4>
        </div>
        <!--To make by defualt open a any panel put class "in" (without quotes)-->
        <div id="per" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
            <div class="panel-body">
                Link 1    Link 1    Link 1    Link 1    Link 1    Link 1
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingTwo">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#family" aria-expanded="false" aria-controls="collapseTwo">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 2</strong>
                </a>
            </h4>
        </div>
        <div id="family" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
            <div class="panel-body">
                Link 2  Link 2  Link 2  Link 2  Link 2  Link 2
            </div>
        </div>
    </div>
    <div class="panel panel-info">
        <div class="panel-heading" role="tab" id="headingThree">
            <h4 class="panel-title">
                <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#social" aria-expanded="false" aria-controls="collapseThree">
                    <span class="glyphicon glyphicon-option-vertical"></span> <strong>Link 3</strong>
                </a>
            </h4>
        </div>
        <div id="social" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
            <div class="panel-body">
                Link 3  Link 3  Link 3  Link 3 Link 3   Link 3  Link 3
            </div>
        </div>
    </div>
</div>

方法 2

すべてをまとめて折りたたむには、クラス "in" を持つすべてのナビゲーションを折りたたむこともできます。これは、開いた折りたたみ式にクラス "in" が追加されているためです。以下のスクリプトを使用してそれらをキャッチし、それらを閉じます。

 $('#accordion .collapse').on('show.bs.collapse', function (e) {
        $('#accordion .in').collapse('hide');
    });
于 2016-10-07T13:48:47.010 に答える