twitter-bootstrap - 玩!框架和 Twitter Bootstrap 下拉菜单处于事件状态

Question

我有一个 Play 框架应用程序，我正在使用 twitter bootstrap 作为前端。

在我的导航栏中，有四个选项，如下所示。

      <div class="nav-collapse">
        <ul class="nav">
          <li class="@("active".when(nav == ""))"><a href="@routes.Application.index()">@Messages("playauthenticate.navigation.home")</a></li>
          <li class="@("active".when(nav == "restricted"))"><a href="@routes.Application.restricted()">@Messages("playauthenticate.navigation.restricted")</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Journey Management<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="@routes.Application.createJourney()"><i class="icon-plus-sign"></i>@Messages("journeys.dropdown.option1")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-calendar"></i>@Messages("journeys.dropdown.option2")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-star"></i>@Messages("journeys.dropdown.option3")</a></li>
            </ul>
          </li>

            @if(!Deadbolt.viewRoleHolderPresent()) {
                <li class="@("active".when(nav == "signup"))"><a href="@routes.Application.signup()">@Messages("playauthenticate.navigation.signup")</a></li>
            }
        </ul>
      </div>

当我导航到“主页”或“注册”页面时，导航栏上的这些选项将变为事件。我的问题是，每当我从下拉栏中选择一个选项时，“主页”按钮就会保持事件状态。我希望“旅程管理”选项处于事件状态，但我不确定如何使用下拉菜单执行此操作。

因此我对 HTML 进行了以下修改。

 <li class="@("active".when(nav == "journeys")) dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Journey Management<b class="caret"></b></a>
            <ul class="dropdown-menu">
              <li><a href="@routes.Application.createJourney()"><i class="icon-plus-sign"></i>@Messages("journeys.dropdown.option1")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-calendar"></i>@Messages("journeys.dropdown.option2")</a></li>
              <li><a href="@routes.Application.Todo()"><i class="icon-star"></i>@Messages("journeys.dropdown.option3")</a></li>
            </ul>
          </li>

当我从旅程管理下拉列表中选择一个选项时，在本例中，“创建旅程” 页面(它是唯一具有操作的页面)的本地主机地址为 http://localhost:9000/journeys 所以我在旅程应用程序路由中调用一个方法。但是导航栏上的主页链接仍然处于事件状态，而导航栏上的旅程管理下拉列表仍然处于非事件状态。

这是加载页面的源代码:

这是实际页面的 HTML

<div class="nav-collapse">
    <ul class="nav">
      <li class="active"><a href="/">Home</a></li>
      <li class=""><a href="/restricted">Restricted page</a></li>
      <li class=" dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Journey Management<b class="caret"></b></a>
        <ul class="dropdown-menu">
          <li><a href="/journeys"><i class="icon-plus-sign"></i>Create a Journey</a>       </li>
          <li><a href="/TODO"><i class="icon-calendar"></i>View all Journeys</a></li>
          <li><a href="/TODO"><i class="icon-star"></i>View saved Journeys</a></li>
        </ul>`

Answer 1

标签中只能有一个 class 属性，因此必须使用:

<li class="@("active".when(nav == "journeys")) dropdown">

这会给你想要的结果。