web-dev-qa-db-ja.com

Twitterの表示/非表示bootstrap tabs

bootstrapを使用してタブの下にコンテンツを表示していますが、タブをもう一度クリックしたときにタブを折りたたむ必要があります。これが機能しないようにしようとしたコードです。

    <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>

タブがこのように機能するかどうかわかりません...折りたたみ機能を試す必要がありますか？

twitter-bootstraptabs
6
AshAndrien

これが、あなたが望むことを実行すると私が信じているジェロミーのソリューションの微調整です：

$('#myTab a').click(function (e) {
    var tab = $(this);
    if(tab.parent('li').hasClass('active')){
        window.setTimeout(function(){
            $(".tab-pane").removeClass('active');
            tab.parent('li').removeClass('active');
        },1);
    }
});

http://jsfiddle.net/NQ97h/39/

19
Chris Bartley

同じ問題が発生し、bootstrap.jsを変更することで解決しました。

_Tab.prototype.show_関数でタブクラス定義（通常は1783行目）を見つけて、以下を変更します。

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_は、クリックすると非表示になります。

2
Rickedb

動作するバージョンがあります（私の場合、メインタブの場合は、ドロップダウンタブを処理するように変更する必要があります）。上記のJeromyのjsfiddleのフォークに投げました： http ：//jsfiddle.net/HsqQQ/3/

コードは次のとおりです。

 $(document).off('click.tab.data-api');
    $(document).on('click.tab.data-api', '[data-toggle="tab"]', function (e) {
        e.preventDefault();
        var tab = $($(this).attr('href'));
        var activate = !tab.hasClass('active');
        $('div.tab-content>div.tab-pane.active').removeClass('active');
        $('ul.nav.nav-tabs>li.active').removeClass('active');
        if (activate) {
            $(this).tab('show')
        }
    });
1
Sigfried

私はこのコードで開閉トグルをサポートする動作するbootstrapピルナビゲーションを取得します：

jQuery(function() {
// Closing active pill when clicking on toggle:
jQuery(document).off('click.bs.tab.data-api');
jQuery(document).on('click.bs.tab.data-api', '[data-toggle="pill"]', function(e) {
    e.preventDefault();
    var activeClass = 'active';
    var tab = jQuery(this).attr('href');
    var tab = tab && tab.replace(/.*(?=#[^\s]*$)/, ''); // strip for ie7
    var tab = jQuery(tab);
    if (!tab.hasClass(activeClass)) {
        jQuery(this).tab('show');
    } else {
        jQuery(this).parent().removeClass(activeClass);
        tab.parent().children().removeClass(activeClass);
    }
});

}）;

0
Eckonator

そのようなことをするのはどうですか？ show.bs.tabは常にclickの前に起動し、clickに正しいステータスを与えます

$(document).on('show.bs.tab', '#myTab a', function(e) {
   if (!$(e.target).hasClass('active')) {
      $(e.target).addClass('monkeyPatch');
   }
});

$(document).on('click', '#myTab a', function(e) {
   var tab = $(this);
   if (tab.hasClass('monkeyPatch')) {
      tab.removeClass('monkeyPatch');
   } else {
      $('.tab-pane').removeClass('active');
      tab.parent('li').removeClass('active');
   }
});
0
GEkk