7

タブの下にコンテンツを表示するためにブートストラップを使用していますが、タブが再度クリックされたときにタブを折りたたみたいです。これは、私が仕事をしようとしたコードですが、役に立ちませんでした:

    <ul id="myTab" class="nav nav-tabs">
        <li class="square"><a class="story" href="#article1" data-toggle="tab"><img src="#"/></a></li>
        <li class="square"><a class="story" href="#article2" data-toggle="tab"><img src="#g"/></a></li>
        <li class="square"><a class="story" href="#article3" data-toggle="tab"><img src="#"/></a></li>
               <div id="article1" class="tab-pane fade"><p>Lorem ipsum...</p></div>
               <div id="article2" class="tab-pane fade"><p>Lorem ipsum dolor sit amet....</p</div>
               <div id="article3" class="tab-pane fade"><p>Lorem ipsum dolor sit amet...</p></div>
    </ul>

<script>
$('#myTab a').click(function (e) {
            if($(this).tab.hasClass('active')){
                    $(this).tab('hide');
                } else {
                        e.preventDefault();
                        $(this).tab('show');
                    }
                })
</script>

タブがこのように機能するかどうかわかりません...折りたたみ機能を試してみるべきですか?

4

6 に答える 6

1

同じ問題が発生し、bootstrap.js を変更して解決しました。

関数のタブ クラス定義 (通常は 1783 行目) を見つけて、次のTab.prototype.showように変更します。

if ($this.parent('li').hasClass('active')) return

に

if ($this.parent('li').hasClass('active')) {
            $this.parent('li').removeClass('active')
            $(selector).removeClass('active')
            return
        }

その後、プロジェクトで「カスタム スクリプト」を作成しなくても、期待どおりに動作します。

編集：

この変更はプロジェクト内のすべてのタブ パネルに影響しますが、この効果を目的のオブジェクトにのみ適用したい場合はdata-hide、次のようなものを追加する必要があります。

if ($this.parent('li').hasClass('active')) {
            if ($this.parent('li').attr('data-hide') == "on") {
                $this.parent('li').removeClass('active')
                $(selector).removeClass('active')
            }
            return
        }

次に、クリックするとすべての親<li>がdata-hide非表示になります。

于 2016-04-20T14:12:45.837 に答える
-4

はい、 Bootstrap の collapse widgetが必要なようです。つまり、この jQuery は既にアクティブなタブを非表示にします。

$('#myTab a').click(function (e) {
    if($(this).parent('li').hasClass('active')){
        $( $(this).attr('href') ).hide();
    }
});​

問題は、これにより非表示のタブが再び表示されなくなることです。そのため、使用したくないと思います。http://jsfiddle.net/jhfrench/NQ97h/を参照

タブを元に戻したい場合は、次を試してください。

$('#myTab a').click(function (e) {
    if($(this).parent('li').hasClass('active')){
        var target_pane=$(this).attr('href');
        $( target_pane ).toggle( !$( target_pane ).is(":visible") );
    }
});

このソリューションについては、 http://jsfiddle.net/epT3L/を参照してください。

于 2013-01-02T21:43:40.343 に答える