javascript - 在标题中包含 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()">☰</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> -->
我想看到悬停与 Bootstrap 和 jQuery 一起工作。
解决方案
All you need to do is to increase .dropdown-content
's z-index
(or remove it) and also remove that position: absolute
.
Check below snippet, is that what you need?
$(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()">☰</a>
</div>
推荐阅读
- python - 在 tf.Session() 内循环
- java - 如何让 Apache Tika 像字节数组一样使用 InputStream 或 File?
- google-cloud-platform - 谷歌云数据区域是本地的吗?
- python - python websocketapp on_message()方法不起作用
- java - 匿名类的Frida钩子覆盖方法?
- excel - 是否可以在索引匹配 vba 中使用或运行?
- android - 有没有办法识别用于解锁/访问的指纹?
- wordpress - 为什么我的字体真棒图标不能居中对齐?
- c# - 我如何验证然后cookie在服务器端.net上是httponly
- typo3 - TYPO3 9 - 图像生成失败 - ImageMagick / GraphicsMagick 处理已启用,但执行命令返回错误