使链接可点击，但也有下拉菜单？

Question

我有一个导航栏，其中有一个带下拉功能的“导航项目”。

但是我想要的是“按钮/导航项”，它在导航栏上可见，可以单击并重定向到另一个页面，然后下拉箭头应该在右侧，您可以在其中可以单击箭头，然后获得下拉菜单。

我有两种方法：

1。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Navbar Toggle -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
  <!-- Navbar Toggle END -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <!-- Navbar Items Links-->
    <ul class="navbar-nav">
      <!-- Home -->
      <li class="nav-item">
        <a class="nav-link" href="../Startseite/Index.jsp">Home <i class="fas fa-home"></i></a>
      </li>
      <!-- Gruppen Dropdown-->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#gruppen" id="navbardrop1" data-toggle="dropdown">Gruppen <i class="fas fa-users"></i></a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#gruppe1">Gruppe 1</a>
          <a class="dropdown-item" href="#gruppe2">Gruppe 2</a>
          <a class="dropdown-item" href="#gruppe3">Gruppe 3</a>
        </div>
      </li>
      <!-- Zahlungen -->
      <li class="nav-item"><a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp">Zahlungen
                <i class="fas fa-receipt"></i>
            </a></li>
    </ul>
    <!-- Navbar Items Rechts-->
    <ul class="navbar-nav ml-auto">
      <!-- Profil -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#asd" id="navbardrop2" data-toggle="dropdown">Benutzer <i class="fas fa-user"></i></a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#asd">Profil bearbeiten <i
                            class="fas fa-user-edit"></i>
                    </a> <a class="dropdown-item" href="#asd">Abmelden <i class="fas fa-sign-in-alt"></i>
                </a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link active" href="../Registrieren/Registrieren.jsp">Registrieren <i class="fas fa-sign-in-alt"></i></a>
      </li>
    </ul>
    <!-- Navbar Items END -->
  </div>
</nav>

这是我正在寻找的设计中的内容，但是我希望单击“ Gruppen”元素，因此它会将您重定向到另一页。

2

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
  <!-- Navbar Toggle -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
    </button>
  <!-- Navbar Toggle END -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <!-- Navbar Items Links-->
    <ul class="navbar-nav">
      <!-- Home -->
      <li class="nav-item">
        <a class="nav-link" href="../Startseite/Index.jsp">Home <i class="fas fa-home"></i></a>
      </li>
      <!-- Gruppen Dropdown-->
      <li class="nav-item">
        <a class="nav-link" href="#gruppen">Gruppen <i class="fas fa-home"></i></a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown"></a>
        <div class="dropdown-menu">
          <a class="dropdown-item" href="#gruppe1">Gruppe 1</a>
          <a class="dropdown-item" href="#gruppe2">Gruppe 2</a>
          <a class="dropdown-item" href="#gruppe3">Gruppe 3</a>
        </div>
      </li>
      <!-- Zahlungen -->
      <li class="nav-item"><a class="nav-link" href="../Zahlungsuebersicht/Zahlungsuebersicht.jsp">Zahlungen
                <i class="fas fa-receipt"></i>
            </a></li>
    </ul>
    <!-- Navbar Items Rechts-->
    <ul class="navbar-nav ml-auto">
      <!-- Profil -->
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#asd" id="navbardrop2" data-toggle="dropdown">Benutzer <i class="fas fa-user"></i></a>
        <div class="dropdown-menu dropdown-menu-right">
          <a class="dropdown-item" href="#asd">Profil bearbeiten <i
                            class="fas fa-user-edit"></i>
                    </a> <a class="dropdown-item" href="#asd">Abmelden <i class="fas fa-sign-in-alt"></i>
                </a>
        </div>
      </li>
      <!-- /c:if -->
      <li class="nav-item">
        <a class="nav-link active" href="../Registrieren/Registrieren.jsp">Registrieren <i class="fas fa-sign-in-alt"></i></a>
      </li>
    </ul>
    <!-- Navbar Items END -->
  </div>
</nav>

我认为这种解决方案真的很脏。

是否有一种干净的方法来实现适当的解决方案？ 我对所有HTML，Bootstrap和CSS都很陌生。

编辑：我不知道为什么，但是我在本地服务器上运行了两个完全相同的代码段，结果却有所不同……我希望它喜欢第二种方法，但是箭头本身并不是导航字，但是当我这样做时，下拉箭头位于导航栏的顶部，就像所有文本上方一样。有办法解决吗？

Answer 1

您当前的代码结构已简化：

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
  Gruppen <i class="fas fa-users"></i>
  </a>
    <div class="dropdown-menu">
      ...
    </div>
</li>

据我了解-目的是使<i class="fas fa-users"></i>成为一个单独的下拉链接，并且样式不应降低。

这将解决您的问题：

<li class="nav-item dropdown nav-link">
  <a href="/#yourlink">
  Gruppen 
  </a>
  <a class="dropdown-toggle" href="#" id="navbardrop1" data-toggle="dropdown">
  <i class="fas fa-users"></i>
  </a>
    <div class="dropdown-menu">
      ...
    </div>
</li>

诀窍在nav-link类中，它可以正确放置菜单元素。如果CSS更复杂，将其移到<li>元素上可能会导致样式方面的一些冲突，因此以后应小心将类从一个元素移到另一个元素。

注意：您必须了解，下拉菜单不应以您现在想要的方式制作，因为与普通用户交互后，希望在单击后选择下拉菜单，而不是重定向到某些外部菜单页面。