twitter-bootstrap - タブのサブメニュー コントロールが選択解除されない

Question

サブメニューを使用してタブ付きコンテンツを制御すると、実際に選択されているかどうかに関係なく、「ホバー/選択済み」ステータスがサブメニュー オプションに残る可能性があることがわかりました。

<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」は意図したとおりに正常に機能します。ただし、「ドロップダウン 2」はタブ付きコンテンツを変更しますが、サブメニュー オプションの「選択済み」ステータスは、別のオプションが選択されたときに消えません。

誰かがそれを修正するのを助けることができますか?