javascript - 在 header 中包含 Bootstrap 4 时，鼠标事件不起作用

标签 javascript html css bootstrap-4

我只是在用 Jquery 玩 Bootstrap 4。我创建了一个导航栏，其中有 4 个链接，其中第 4 个有子菜单。如果我将鼠标悬停在该链接上，它将打开子菜单。但它只有在我不提供引导 CDN 时才有效。如果我提供它，它就会停止工作。

我尝试下载 bootstrap CSS 和 jquery min js。它没有帮助。我可以使用自定义 CSS 来完成此操作，但我只想使用 jQuery 来完成。

代码

$(document).ready(function() {

  $("#dropDown-nav, #submenu").mouseenter(function() {
    console.log("mouse entered");
    $("#submenu").show();
  });

  $("#submenu, #dropDown-nav").mouseleave(function() {
    console.log("mouse left");
    $("#submenu").hide();
  });

  $(".topnav a").click(function(event) {
    $("a").css('background-color', '#2F3942');
    $(".dropbtn").css('background-color', '#2F3942');
    $(this).css('background-color', '#E1E1E1');
    $("a").css('color', '#E1E1E1');
    $(".dropbtn").css('color', '#E1E1E1');
    $(this).css('color', '#2F3942');
  });

  $(".dropdown-content a").click(function(event) {
    $(".topnav a").css('background-color', '#2F3942');
    $(".dropbtn").css('background-color', '#E1E1E1');
    $(this).css('background-color', '#E1E1E1');
    $(".topnav a").css('color', '#E1E1E1');
    $(".dropbtn").css('color', '#2F3942');
    $(this).css('color', '#2F3942');
  });

});

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
#mainNav {
  text-align: left;
  vertical-align: middle;
}

#mainNav_2 {
  text-align: center;
  font-size: 2em;
  color: white;
  font-weight: bolder;
}

#mainNav {
  overflow: hidden;
  background-color: #0D5DB8;
  padding-left: 15px;
  height: 6em;
}

body {
  margin: 0;
  font-family: Arial
}

.topnav {
  overflow: hidden;
  background-color: #2F3942;
}

.topnav a {
  float: left;
  display: block;
  color: #E1E1E1;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.forMargin {
  margin-right: 15px;
}


/* 
    .topnav a:active{
        background-color: #E1E1E1;
        color: #2F3942; 
    } */


/* .active {
      background-color: #E1E1E1;
      color: #2F3942;
    } */

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 14px;
  border: none;
  outline: none;
  color: #E1E1E1;
  padding: 8px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-weight: bolder;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #2F3942;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

.dropdown-content a {
  float: none;
  color: E1E1E1;
  padding: 7px 9px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #2F3942;
  color: E1E1E1;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}


/* .dropdown:hover .dropdown-content {
      display: block;
    } */

@media screen and (max-width: 600px) {
  .topnav a,
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: left;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-expand-sm j" id="mainNav">
  <div class="col-4" id="mainNav_1">
  </div>
  <div class="col-4" id="mainNav_2">
  </div>
  <div class="col-4" id="mainNav_3">
  </div>
</nav>

<div class="topnav" id="myTopnav">
  <a href="#A" class="forMargin">A</a>
  <a href="#B" class="forMargin">B</a>
  <a href="#C" class="forMargin">B</a>
  <div class="dropdown">
    <button class="dropbtn" id="dropDown-nav" class="forMargin">D 
                            <i class="fa fa-caret-down"></i>
                        </button>
    <div class="dropdown-content" id="submenu">
      <a href="#link1">Link 1</a>
      <a href="#link2">Link 2</a>
      <a href="#link3">Link 3</a>
    </div>
  </div>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<!-- <div class="jumbotron">
                    <h1>Bootstrap Tutorial</h1>      
                    <p>Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile-first projects on the web.</p>
            </div> -->

我希望看到 hover 与 Bootstrap 和 jQuery 一起工作。

最佳答案

您需要做的就是增加 .dropdown-content 的 z-index(或删除它)并删除 position: absolute。

检查下面的代码片段，这是您需要的吗？

$(document).ready(function() {

  $("#dropDown-nav, #submenu").mouseenter(function() {
    console.clear()
    console.log("mouse entered");
    $("#submenu").show();
  });

  $("#submenu, #dropDown-nav").mouseleave(function() {
    console.clear()
    console.log("mouse left");
    $("#submenu").hide();
  });

  $(".topnav a").click(function(event) {
    $("a").css('background-color', '#2F3942');
    $(".dropbtn").css('background-color', '#2F3942');
    $(this).css('background-color', '#E1E1E1');
    $("a").css('color', '#E1E1E1');
    $(".dropbtn").css('color', '#E1E1E1');
    $(this).css('color', '#2F3942');
  });

  $(".dropdown-content a").click(function(event) {
    $(".topnav a").css('background-color', '#2F3942');
    $(".dropbtn").css('background-color', '#E1E1E1');
    $(this).css('background-color', '#E1E1E1');
    $(".topnav a").css('color', '#E1E1E1');
    $(".dropbtn").css('color', '#2F3942');
    $(this).css('color', '#2F3942');
  });

});

function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
#mainNav {
  text-align: left;
  vertical-align: middle;
}

#mainNav_2 {
  text-align: center;
  font-size: 2em;
  color: white;
  font-weight: bolder;
}

#mainNav {
  overflow: hidden;
  background-color: #0D5DB8;
  padding-left: 15px;
  height: 6em;
}

body {
  margin: 0;
  font-family: Arial
}

.topnav {
  overflow: hidden;
  background-color: #2F3942;
}

.topnav a {
  float: left;
  display: block;
  color: #E1E1E1;
  text-align: center;
  padding: 8px 10px;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
}

.forMargin {
  margin-right: 15px;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 14px;
  border: none;
  outline: none;
  color: #E1E1E1;
  padding: 8px 10px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
  font-weight: bolder;
}

.dropdown-content {
  display: none;
  background-color: #2F3942;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 10;
}

.dropdown-content a {
  float: none;
  color: E1E1E1;
  padding: 7px 9px;
  text-decoration: none;
  display: block;
  text-align: left;
}

.topnav a:hover,
.dropdown:hover .dropbtn {
  background-color: #2F3942;
  color: E1E1E1;
}

.dropdown-content a:hover {
  background-color: #ddd;
  color: black;
}


/* .dropdown:hover .dropdown-content {
      display: block;
    } */

@media screen and (max-width: 600px) {
  .topnav a,
  .dropdown .dropbtn {
    display: none;
  }
  .topnav a.icon {
    float: left;
    display: block;
  }
}

@media screen and (max-width: 600px) {
  .topnav.responsive {
    position: relative;
  }
  .topnav.responsive .icon {
    position: absolute;
    right: 0;
    top: 0;
  }
  .topnav.responsive a {
    float: none;
    display: block;
    text-align: left;
  }
  .topnav.responsive .dropdown {
    float: none;
  }
  .topnav.responsive .dropdown-content {
    position: relative;
  }
  .topnav.responsive .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

<nav class="navbar navbar-expand-lg navbar-expand-sm j" id="mainNav">
  <div class="col-4" id="mainNav_1">
  </div>
  <div class="col-4" id="mainNav_2">
  </div>
  <div class="col-4" id="mainNav_3">
  </div>
</nav>

<div class="topnav" id="myTopnav">
  <a href="#A" class="forMargin">A</a>
  <a href="#B" class="forMargin">B</a>
  <a href="#C" class="forMargin">B</a>
  <div class="dropdown">
    <button class="dropbtn" id="dropDown-nav" class="forMargin">D 
                            <i class="fa fa-caret-down"></i>
                        </button>
    <div class="dropdown-content" id="submenu">
      <a href="#link1">Link 1</a>
      <a href="#link2">Link 2</a>
      <a href="#link3">Link 3</a>
    </div>
  </div>
  <a href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

关于javascript - 在 header 中包含 Bootstrap 4 时，鼠标事件不起作用，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57436020/

上一篇：css - 使一个 div 跨越网格中的两行

下一篇：php - body css 上的背景颜色不起作用

相关文章：

javascript - 如何让GitHub Pages Markdown支持美人鱼图？

html - 使用 CSS 或 HTML 或 JavaScript 对列表进行内容包装？

php - 无法使用 Javascript 验证表单； PHP 重定向问题？

php - 将 HTML Div 内容转换为图像

javascript - 随机空位？

css - DIV 环绕 100% 高度的 IMG

javascript - 捕获多次出现的 javascript 正则表达式

javascript - 如果导航打开则隐藏 div

javascript - jQuery UI 自动完成 : minLength in a textarea, 有没有办法在每个新行中从 0 开始计数？

javascript - 如何智能地将文本 block 分成段落？

©2024 IT工具网  联系我们