时间戳

首页 > 解决方案 > 如何修复使用引导程序创建的下拉菜单

bootstrap-4 - 如何修复使用引导程序创建的下拉菜单

问题描述

我正在创建一个下拉菜单。这是我第一次使用引导程序。我的显示器有一个问题。

以下代码将在其右侧显示一个标题为“Andesite Peak”的汉堡包图标。当我将鼠标悬停在图标上时，下拉菜单会正确显示。问题是在我将鼠标悬停在图标上之前，菜单会连续显示。当我将鼠标悬停在图标上时，它会替换为正确的菜单实例。我究竟做错了什么？

.tour_title {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  display: block;
  text-align: left;
  position: absolute;
  width: 650px;
  top: 60px;
  left: 65px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: inline-block;
  position: absolute;
  font-size: 14px;
  font-weight: normal;
  min-width: 100px;
  background-color: #F9F9F9;
  min-width: 120px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="tour_title">
  <div class="dropdown" style="padding-right: 10px">
    <img src="../../assets/icons/hamburger_trans.png" width="20px" height="13px" alt="Hamburger icon" />
    <p class="dropdown-content">
      <a href="#">Link 1</a><br/>
      <a href="#">Link 2</a><br/>
      <a href="#">Link 3</a><br/>
    </p>
  </div>
  Andesite Peak
</div>

标签： bootstrap-4dropdown

解决方案

display您可以通过将类的 CSS 属性的值从更改为来隐藏dropdown-content下拉inline-block内容none：

.dropdown-content {
  display: none;
  /* other properties */
}

代码片段：

.tour_title {
  font-family: Verdana, Arial, Helvetica, sans-serif;
  font-size: 20px;
  font-weight: bold;
  color: #000000;
  display: block;
  text-align: left;
  position: absolute;
  width: 650px;
  top: 60px;
  left: 65px;
}

.dropdown {
  position: relative;
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  font-size: 14px;
  font-weight: normal;
  min-width: 100px;
  background-color: #F9F9F9;
  min-width: 120px;
  z-index: 1;
}

.dropdown:hover .dropdown-content {
  display: block;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<div class="tour_title">
  <div class="dropdown" style="padding-right: 10px">
    <img src="../../assets/icons/hamburger_trans.png" width="20px" height="13px" alt="Hamburger icon" />
    <p class="dropdown-content">
      <a href="#">Link 1</a><br/>
      <a href="#">Link 2</a><br/>
      <a href="#">Link 3</a><br/>
    </p>
  </div>
  Andesite Peak
</div>

推荐阅读