子菜單控制選項卡不取消選擇

Question

我發現使用子菜單來控制tabbed content可以導致「懸停/選定」狀態保留在子菜單選項上，無論它是否實際選定。

<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例子中，兩個下拉菜單的菜單控制的標籤。 「Dropdown 1」的功能通常與預期相同。然而，「下拉2」會改變標籤內容，但是當選擇另一個選項時，子菜單選項的「選定」狀態不會消失。

任何人都可以幫助解決它嗎？

Answer 1

我遇到了同樣的問題，寫了一個快速判明：

$(document).ready(function(){ 
    $(".dropdown-submenu").each(function(){ 
     var submenu = $(this).find(".dropdown-menu"); 
     submenu.find("li").each(function(){ 
      var item = $(this); 
      item.click(function(){ 
       submenu.find("li").removeClass("active"); 
      }); 
     }); 
    }); 
}); 

爲了使它工作，只是將其放置在HTML文件中的腳本標記。像這裏：

http://jsfiddle.net/welhoener/qc8EL/