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示例中，两个下拉菜单都控制选项卡。 “下拉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/

选项卡的子菜单控制不取消选择

1 个答案: