Question

我希望我的下拉菜单在我单击其中的项目时处于活动状态，换句话说，服务一词处于活动状态。我该怎么做？

<nav class="navbar navbar-light navbar-expand-xl">
  <a class="navbar-brand" href="#"><img src="" alt=""/></a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
     <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav ml-auto">
          <li class="nav-item">
            <a class="nav-link" href="#"> Home</a>
           </li>
            <li class="nav-item dropdown">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarDropdown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Services
                </a>
                <div class="dropdown-menu active" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#" id="active"
                    >Lala</a>
                  <a class="dropdown-item" href="#"
                    >Haha</a
                  >
                </div>
              </li>
            </ul>
          </div>
        </nav>

Answer 1

尝试在你的 li 上设置 active class

<!--- <li class="nav-item dropdown active">--->
 <li class="nav-item dropdown active">
                <a
                  class="nav-link dropdown-toggle"
                  href="#"
                  id="navbarDropdown"
                  role="button"
                  data-toggle="dropdown"
                  aria-haspopup="true"
                  aria-expanded="false"
                >
                  Services
                </a>
                <div class="dropdown-menu active" aria-labelledby="navbarDropdown">
                  <a class="dropdown-item" href="#" id="active"
                    >Lala</a>
                  <a class="dropdown-item" href="#"
                    >Haha</a
                  >
                </div>
              </li>

下拉菜单处于活动状态，而不是项目

1 个答案: