Question

我在某些链接上遇到了麻烦，我想单击通过Bootstrap创建的“ Dropdown”菜单项。我怀疑存在z-index问题，但是我尝试将位置设置为relative，并在整个菜单和单个菜单项上设置了较高的z-index。我还尝试为我认为可能“盖住”菜单的项目设置较低的z-index，但是没有运气。

查看Stackoverflow和Google大约一个小时后，所有内容都指向z-index问题。我已经看到了各种解决方案，建议对各种项目使用pointer-events，将其设置为等于none。也没有运气，

我的代码如下（您可以单击断开的图像链接以打开菜单，该头像图像是从PHP /数据库中提取的，然后单击“更改头像照片”或“注销” ）：

body {
  position: relative;
  z-index: 0;
}

.av_photo {
  border-radius: 100px;
  border: 3px solid lightgrey;
  padding: 5px;
}

.dropleft {
  margin-left: 93%;
  margin-top: -3.8%;
  position: relative;
}

.dropdown-menu {}

.dropdown-menu::before {
  position: absolute;
  display: inline-block;
  border-bottom: 7px solid transparent;
  border-top: 7px solid transparent;
  border-left: 7px solid #CCC;
  display: inline-block;
  right: -7px;
  top: 42px;
  content: '';
}

.dropdown-menu::after {
  position: absolute;
  display: inline-block;
  border-bottom: 6px solid white;
  border-top: 6px solid transparent;
  border-left: 6px solid transparent;
  display: inline-block;
  right: -7px;
  top: 42px;
  content: '';
}

#footer {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30px;
  /* Height of the footer */
  font-size: 14px;
  color: gray;
  padding: 5px;
}

.avatardisplay {
  display: inline-block;
}

.avatardisplay img {
  margin: 25px;
  cursor: pointer;
}

.avatardisplay:hover>a {
  -webkit-filter: grayscale(100%);
  filter: grayscale(100%);
  -webkit-transition: .3s ease-in-out;
  transition: .3s ease-in-out;
}

.avatardisplay:hover>a:hover {
  -webkit-filter: grayscale(0%);
  filter: grayscale(0%);
}

.avatardisplay a {
  text-decoration: none;
}

.av {
  border-radius: 100px;
  border: 3px solid lightgrey;
  padding: 5px;
}

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Home</title>
  <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
  <script type="text/JavaScript" src="js/chart.js"></script>
  <script src="https://code.highcharts.com/highcharts.js"></script>
  <script src="https://code.highcharts.com/modules/exporting.js"></script>
  <script src="https://code.highcharts.com/modules/export-data.js"></script>
  <link rel="stylesheet" type="text/css" href="css/home.css">
  <?php
// get the current URL
    $link = $_SERVER['REQUEST_URI'];
?>
</head>

<body>
  <ul style="margin-top: 2%; margin-left: 2%" class="nav nav-pills">
    <li class="nav-item"><a class="nav-link active" href="#">Home</a></li>
    <li class="nav-item"><a class="nav-link" href="dashboard.php">Reports</a></li>
    <div class="navbar dropleft">
      <li data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" class="nav-item">
        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <a class="dropdown-item" href="logout.php">Change Avatar Photo</a> <a class="dropdown-item" href="#">Settings</a> <a class="dropdown-item" href="logout.php">Logout</a> </div>
        <a href=""><img class="av_photo" src=<?php echo $av ?>></a>
      </li>
    </div>
  </ul>
  <div class="container">
    <br>
    <h3>Quick Overview:</h3>
    <hr>
    <div class="card-deck">
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Sucessful Reports</h5>
          <p class="card-text">Reports that were ran where data matches from sent / recieved data.</p>
          <button id="successtoggle" class="btn btn-success">
                                    <?php echo $success ?>
                                </button>
        </div>
      </div>
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Failed Reports</h5>
          <p class="card-text">Reports that were ran where data does not match from sent / recieved data.</p>
          <a href="#" id="failtoggle" class="btn btn-danger">
            <?php echo $failed ?>
          </a>
        </div>
      </div>
      <div class="card" style="width: 18rem;">
        <div class="card-body">
          <h5 class="card-title">Total Reports</h5>
          <p class="card-text">Total number of reports ran between success and fail.</p>
          <a href="#" id="totaltoggle" class="btn btn-primary">
            <?php echo $total ?>
          </a>
        </div>
      </div>
    </div>

Answer 1

锚标签<a>必须具有href= 非空属性，才能用作链接。我建议使用href="javascript:void(0)"，以便为链接地址添加一个“占位符”。

链接在点击时不起作用

1 个答案: