Question

我有一个播放框架应用程序，我正在使用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所以我在journeys应用程序路由中调用一个方法。但导航栏上的“主页”链接仍处于活动状态，而导航栏上的“旅程管理”下拉列表仍处于非活动状态。

Screenshot describing problem

以下是加载页面的来源：

这是实际页面中的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">

这将为您提供所需的结果。

Answer 2

所以我愚蠢地忽略了在这个问题中涉及的.scala.html文件中包含“journeys”@main("Journey Creator", "journeys") {参数。添加此功能可解决导航问题。

玩！框架＆amp; Twitter Bootstrap Dropdown处于活动状态

2 个答案: