ユーザーがタブをカテゴリの見出しに折りたたむことができる、タブ付きのナビゲーションシステムを機能させようとしています。理想的には、カテゴリ外のタブを選択するとカテゴリが自動的に閉じられ、選択されたタブのように見え、選択されたときにグループの最初のタブが実際に選択されます。
今のところ、特定のタブを表示および非表示にする機能を備えたナビゲーション機能があり、すべてのタブが機能しますが、折りたたみ可能なグループの内側のタブを外側のタブとは異なるセットとして扱っているため、タブの選択を適切に解除しないでください。JavaScriptを使ってこれを修正しようとしましたが、方法がわかりません。これについての洞察は大歓迎です。
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>