【问题标题】:Dropdown menu active, not the items下拉菜单处于活动状态,而不是项目
【发布时间】:2021-01-22 18:34:54
【问题描述】:

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

<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>

【问题讨论】:

  • 您是否希望项目名称在点击时处于活动状态。
  • 不是下拉列表中的项目!下拉菜单的标题! “服务”一词
  • 您希望项目名称的标题处于活动状态
  • 上面代码中的Services这个词!

标签: html bootstrap-4 dropdown


【解决方案1】:

尝试在你的 li 上积极上课

<!--- <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>

【讨论】:

  • 这不是我想要的!在您的示例中,我希望“下拉”一词处于活动状态。不是下拉列表中的元素
  • 您希望它即使在项目点击时也处于活动状态
  • 正确!现在你明白了!
  • 您只需使用 bootstrap 4.0 即可完成
  • 检查是否可以解决link
猜你喜欢
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2013-07-26
  • 2018-11-14
  • 2014-08-25
  • 2015-08-30
  • 1970-01-01
相关资源
最近更新 更多