javascript - navs - Navegación con pestañas Bootstrap con categorías colapsantes

navs bootstrap 3

Question

He intentado que funcione un sistema de navegación con pestañas que permite al usuario colapsar las pestañas en los encabezados de las categorías. Idealmente, las categorías se cerrarían automáticamente si selecciona una pestaña fuera de ellas, y ambas se verían como una pestaña seleccionada y, de hecho, seleccionarían la primera pestaña de su grupo cuando se seleccionen.

A partir de ahora, tengo el navegador funcionando con la capacidad de mostrar y ocultar ciertas pestañas y todas las pestañas funcionan, pero está tratando las pestañas dentro del grupo colapsable como un conjunto diferente de las que están fuera de él y, como tal, lo hace No deseleccione las pestañas correctamente. Estaba tratando de remediar esto usando javascript, pero no he encontrado la manera. Cualquier idea sobre esto sería muy apreciada.

Enlace al código en 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>

Answer 1

Logré hacer que esto funcionara, pero requirió algunos pequeños cambios en el marcado más algún código jQuery personalizado.

Aquí está el violín actualizado . Tenga en cuenta que el CSS también se actualizó para adaptarse a los cambios de marcado.

Aquí está el código resultante:

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'');
}
});