Question

如果您按下菜单项而不是另一个菜单项，则无法返回您来自的菜单项，因为所有菜单都保持活动状态。

我该如何解决这个问题？

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="container">
  <div class="dropdown">
    <button class="btn btn-primary dropdown-toggle" id="menu" type="button" data-toggle="dropdown">Dropdown Example
    <span class="caret"></span></button>
    <ul class="dropdown-menu" role="menu" aria-labelledby="menu">
      <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu1">HTML</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu2">CSS</a></li>
      <li role="presentation"><a role="menuitem" tabindex="-1" data-toggle="tab" href="#menu3">JavaScript</a></li>
    </ul>
  </div>

  <div class="tab-content">
    <div id="home" class="tab-pane fade in active">
      <h3>HOME</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
    <div id="menu1" class="tab-pane fade">
      <h3>Menu 1</h3>
      <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
    </div>
    <div id="menu2" class="tab-pane fade">
      <h3>Menu 2</h3>
      <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
    </div>
    <div id="menu3" class="tab-pane fade">
      <h3>Menu 3</h3>
      <p>Eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
    </div>
  </div>
</div>

Answer 1

两者都可以使用bootstrap的内置事件。将以下内容放在关闭正文标记之前的html中。当菜单显示时，这有效地删除了li中的所有active类。

<script>
    $(document).ready(function(){
        $(".dropdown").on("show.bs.dropdown", function(){
            $(".dropdown-menu li").removeClass("active");
        });
    });
</script>

Here is a fiddle

Bootstrap documentation

下拉标签保持活动状态

1 个答案: