我发现使用子菜单来控制选项卡式内容会导致“悬停/选定”状态保留在子菜单选项上，无论它是否实际被选中。
<div class="container-fluid">
<h1>Menu-controlled Tabs Test</h1>
<div class="navbar">
<div class="navbar-inner">
<div class="container">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</a>
<div class="nav-collapse">
<ul class="nav" id="mytabs">
<li class="active"><a tabindex="-1" href="#tab1" data-toggle="tab">Select Tab 1</a></li>
<li class="dropdown">
<a class="dropdown-toggle" id="drop1" role="button" data-toggle="dropdown" href="#">Dropdown 1<b class="caret"></b></a>
<ul id="menu1" class="dropdown-menu" role="menu" aria-labelledby="dLabel1">
<li><a tabindex="-1" href="#tab2" data-toggle="tab">Select Tab 2</a></li>
<li><a tabindex="-1" href="#tab3" data-toggle="tab">Select Tab 3</a></li>
<li><a tabindex="-1" href="#tab4" data-toggle="tab">Select Tab 4</a></li>
</ul>
<li class="dropdown">
<a class="dropdown-toggle" id="drop2" role="button" data-toggle="dropdown" href="#">Dropdown 2<b class="caret"></b></a>
<ul id="menu2" class="dropdown-menu" role="menu" aria-labelledby="dLabel2">
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Sub-menu 1</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#tab5" data-toggle="tab">Select Tab 5</a></li>
<li><a tabindex="-1" href="#tab6" data-toggle="tab">Select Tab 6</a></li>
<li><a tabindex="-1" href="#tab7" data-toggle="tab">Select Tab 7</a></li>
<li><a tabindex="-1" href="#tab8" data-toggle="tab">Select Tab 8</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Sub-menu 1</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#tab9" data-toggle="tab">Select Tab 9</a></li>
<li><a tabindex="-1" href="#tab10" data-toggle="tab">Select Tab 10</a></li>
<li><a tabindex="-1" href="#tab11" data-toggle="tab">Select Tab 11</a></li>
<li><a tabindex="-1" href="#tab12" data-toggle="tab">Select Tab 12</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Sub-menu 1</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#tab13" data-toggle="tab">Select Tab 13</a></li>
<li><a tabindex="-1" href="#tab14" data-toggle="tab">Select Tab 14</a></li>
<li><a tabindex="-1" href="#tab15" data-toggle="tab">Select Tab 15</a></li>
<li><a tabindex="-1" href="#tab16" data-toggle="tab">Select Tab 16</a></li>
</ul>
</li>
<li class="dropdown-submenu">
<a tabindex="-1" href="#">Sub-menu 1</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#tab17" data-toggle="tab">Select Tab 17</a></li>
<li><a tabindex="-1" href="#tab18" data-toggle="tab">Select Tab 18</a></li>
<li><a tabindex="-1" href="#tab19" data-toggle="tab">Select Tab 19</a></li>
<li><a tabindex="-1" href="#tab20" data-toggle="tab">Select Tab 20</a></li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="tab-content">
<div class="tab-pane active" id="tab1">Tab 1</div>
<div class="tab-pane" id="tab2">Tab 2</div>
<div class="tab-pane" id="tab3">Tab 3</div>
<div class="tab-pane" id="tab4">Tab 4</div>
<div class="tab-pane" id="tab5">Tab 5</div>
<div class="tab-pane" id="tab6">Tab 6</div>
<div class="tab-pane" id="tab7">Tab 7</div>
<div class="tab-pane" id="tab8">Tab 8</div>
<div class="tab-pane" id="tab9">Tab 9</div>
<div class="tab-pane" id="tab10">Tab 10</div>
<div class="tab-pane" id="tab11">Tab 11</div>
<div class="tab-pane" id="tab12">Tab 12</div>
<div class="tab-pane" id="tab13">Tab 13</div>
<div class="tab-pane" id="tab14">Tab 14</div>
<div class="tab-pane" id="tab15">Tab 15</div>
<div class="tab-pane" id="tab16">Tab 16</div>
<div class="tab-pane" id="tab17">Tab 17</div>
<div class="tab-pane" id="tab18">Tab 18</div>
<div class="tab-pane" id="tab19">Tab 19</div>
<div class="tab-pane" id="tab20">Tab 20</div>
</div>
</div>
http://jsfiddle.net/scottclassen/zQw5J/3/
在上面的 jsFiddle 示例中，两个下拉菜单都控制选项卡。“下拉菜单 1”按预期正常运行。"Dropdown 2" however will change the tabbed content, but the "selected" status of the sub-menu option does not disappear when another option is selected.
任何人都可以帮助修复它吗？