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

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 都很陌生。

编辑：我不知道为什么，但我在本地服务器上运行了两个完全相同的代码 sn-ps，结果不同...我希望它喜欢第二个方法，但没有箭头是它自己的导航项，但是当我这样做时，下拉箭头位于导航栏的顶部，就像所有文本一样。有没有办法解决这个问题？

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> 元素可能会导致样式冲突，因此在将来将类从一个元素移动到另一个元素时要小心。

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