时间戳

首页 > 解决方案 > 为什么我的下拉菜单只允许我单击菜单中的第一项？

html - 为什么我的下拉菜单只允许我单击菜单中的第一项？

问题描述

我正在尝试制作一个下拉菜单，允许我导航到我的 Web 应用程序中的不同页面。每次单击菜单时，项目都会正确显示，但除了第一个项目外，我似乎无法单击任何内容。他们似乎被禁用了。

以下是它如何查找不同项目的图像： 第一项

第二项

它们都指向各自的页面，但超链接仅适用于第一项。我错过了什么吗？

这是我的代码片段：

<li class="nav-item">
  <div class="dropdown">
      <a href="#"
         class="nav-link dropdown-toggle a-btn ltc-gold-web-golden"
         data-toggle="dropdown" aria-expanded="false">Characters</a>
      <ul class="dropdown-menu" role="menu">
          <li class="nav-item">
              <a href="ron.html"
                 class="nav-link a-btn ltc-gold-web-golden">Ron</a>
          </li>
          <li class="nav-item">
              <a href="fatima.html"
                 class="nav-link a-btn ltc-gold-web-golden">Fatima</a>
          </li>
          <li class="nav-item">
              <a href="kandice.html" class="nav-link a-btn ltc-gold-web-golden">Kandice</a>
          </li>
          <li class="nav-item">
              <a href="ricky.html"
                 class="nav-link a-btn ltc-gold-web-golden">Ricky</a>
          </li>
          <li class="nav-item">
              <a href="rob.html" class="nav-link a-btn ltc-gold-web-golden">Rob</a>
          </li>
      </ul>
  </div>
</li>

标签： htmlcssbootstrap-4

解决方案

在此示例中，您的问题未涵盖，因为在您的代码中，其他元素的 z-index 高于您的下拉菜单。

z-index 是指定元素及其后代的 z 顺序的属性。当元素重叠时，z-order 确定哪个元素覆盖另一个元素。z-index 较大的元素通常会覆盖 z-index 较小的元素。

从上面的解释给z-index: 1;你的主要父 div。

在这个例子中，父母是li.nav-item.

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<li class="nav-item">
  <div class="dropdown">
      <a href="#"
         class="nav-link dropdown-toggle a-btn ltc-gold-web-golden"
         data-toggle="dropdown" aria-expanded="false">Characters</a>
      <ul class="dropdown-menu" role="menu">
          <li class="nav-item">
              <a href="ron.html"
                 class="nav-link a-btn ltc-gold-web-golden">Ron</a>
          </li>
          <li class="nav-item">
              <a href="fatima.html"
                 class="nav-link a-btn ltc-gold-web-golden">Fatima</a>
          </li>
          <li class="nav-item">
              <a href="kandice.html" class="nav-link a-btn ltc-gold-web-golden">Kandice</a>
          </li>
          <li class="nav-item">
              <a href="ricky.html"
                 class="nav-link a-btn ltc-gold-web-golden">Ricky</a>
          </li>
          <li class="nav-item">
              <a href="rob.html" class="nav-link a-btn ltc-gold-web-golden">Rob</a>
          </li>
      </ul>
  </div>
</li>

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

推荐阅读