Bootstrap-Tabbed Nav mit Kollabierenden Kategorien

Habe ich versucht, um eine tabbed nav-system arbeiten, das dem Benutzer ermöglicht, Zusammenbruch Registerkarten in der Kategorie überschriften. Im Idealfall werden die Kategorien automatisch zu schließen, wenn Sie eine Registerkarte auswählen, die außerhalb von Ihnen, und würde Aussehen wie eine ausgewählte Registerkarte und tatsächlich wählen Sie die erste Registerkarte, die in Ihrer Gruppe, wenn Sie ausgewählt sind.

Als jetzt, ich habe die nav-Funktion mit der Möglichkeit zum anzeigen und ausblenden von Registerkarten und alle Registerkarten arbeiten, aber es ist die Behandlung der Registerkarten im inneren des faltbaren Gruppe eine andere Gruppe außerhalb, und als solche nicht aufgehoben tabs richtig. Ich habe versucht, dies zu beheben mit Hilfe von javascript, aber ich habe nicht herausgefunden, wie. Irgendwelche Erkenntnisse zu diesem würde sehr geschätzt werden.

Link, um den code auf jsFiddle.

<div class="row">
<div class="span4">
    <div class="side-nav-container affix-top">
        <ul class="nav nav-tabs nav-stacked">
            <li class="active"><a data-toggle="collapse" href="#Tab1">Tab1</a>
            </li>
            <div id="Tab1" class="collapse in">
                <ul class="nav nav-tabs nav-stacked" id="subnav">
                    <li class="active"><a id="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li>
                    <li><a data-toggle="tab" href="#Subtab2">Subtab2</a></li>
                    <li><a data-toggle="tab" href="#Subtab3">Subtab3</a></li>
                </ul>
            </div>
            <li><a data-toggle="tab" href="#Tab2">Tab2</a></li>
            <li><a data-toggle="tab" href="#Tab3">Tab3</a></li>
            <li><a data-toggle="tab" href="#Tab4">Tab4</a></li>
        </ul>
    </div>
</div>
<div class="span8">
    <div class="tab-content">
        <div class="tab-pane fade active in" id="Subtab1">Content 1a</div>
        <div class="tab-pane fade" id="Subtab2">Content 1b</div>
        <div class="tab-pane fade" id="Subtab3">Content 1c</div>
        <div class="tab-pane fade" id="Tab2">Content 2</div>
        <div class="tab-pane fade" id="Tab3">Content 3</div>
        <div class="tab-pane fade" id="Tab4">Content 4</div>
    </div>
</div>

  • irgendeinen Grund, warum Sie verwenden eine veraltete version von Bootstrap? Ich rate Ihnen, mindestens ein upgrade auf 2.3.2
  • Update von 2.3.1 zu 2.3.2 ändert nichts, dass merke ich. Update auf 3.0.0 lässt alles explodieren auf der gesamten Seite, so sollte ich wohl herausfinden. So oder so, das Problem, dass meine Frage betrifft ist die gleiche.
  • Ja, ich habe wirklich nicht gedacht, es würde das Problem zu beheben, ich Frage mich nur, wenn Sie waren erforderlich, um die version 2.2.1, und ja, ein update auf die version 3 erfordert einige refactoring aufgrund von änderungen in einige Klasse Namen, es ist definitiv nicht eine schnelle Verbesserung... anyways, ich glaube, ich habe es in v2 können Sie überprüfen Sie die Antworten unten
InformationsquelleAutor e Rac | 2013-09-22
  1. 1

    Mir gelungen, diese Arbeit aber ist es erforderlich eine leichte Veränderung in der markup-plus einige benutzerdefinierte jQuery-code.

    Hier ist die aktualisiert fiddle. Beachten Sie, dass der CSS wurde ebenfalls aktualisiert, um Platz für die markup-änderungen.

    Hier ist der resultierende code:

    HTML

    <div class="row">
    <div class="span4">
        <div class="side-nav-container affix-top">
            <ul class="nav nav-tabs nav-stacked">
                <li class="active"> <a data-toggle="collapse" href="#Tab1">Tab1</a>
                    <ul class="subnav nav nav-tabs nav-stacked collapse in" id="Tab1">
                        <li class="active"><a class="subnavtab" data-toggle="tab" href="#Subtab1">Subtab1</a></li>
                        <li><a class="subnavtab" data-toggle="tab" href="#Subtab2">Subtab2</a></li>
                        <li><a class="subnavtab" data-toggle="tab" href="#Subtab3">Subtab3</a></li>
                    </ul>
                </li>
                <li><a data-toggle="tab" href="#Tab2">Tab2</a></li>
                <li><a data-toggle="tab" href="#Tab3">Tab3</a></li>
                <li><a data-toggle="tab" href="#Tab4">Tab4</a></li>
            </ul>
        </div>
    </div>
    <div class="span8">
        <div class="tab-content">
            <div class="tab-pane fade active in" id="Subtab1">Content 1a</div>
            <div class="tab-pane fade" id="Subtab2">Content 1b</div>
            <div class="tab-pane fade" id="Subtab3">Content 1c</div>
            <div class="tab-pane fade" id="Tab2">Content 2</div>
            <div class="tab-pane fade" id="Tab3">Content 3</div>
            <div class="tab-pane fade" id="Tab4">Content 4</div>
        </div>
    </div>
</div>

    jQuery

    $('.nav-tabs [data-toggle="collapse"]').on('click', function () {
    //Prevent the subnav from collapsing
    if ($($(this).attr('href')).hasClass('in')) return false;
    //Make collapse links act like tabs
    $(this).parent().addClass('active').siblings('li').removeClass('active');
    //Activate first subtab
    $($(this).attr('href')).find('[data-toggle="tab"]').first().tab('show');
});

$('.nav-tabs > li > a').on('click', function () {
    //Hide any open subnav only if it's not the collapse link
    //also deactivate any active subtab
    if ($(this).data('toggle') != 'collapse') {
        $(this).closest('.nav-tabs').find('.collapse.in').collapse('hide').find('.active').removeClass('active');
    }
});
    InformationsquelleAutor koala_dev
Schreibe einen Kommentar