如何在 Bootstrap 4.1 中悬停时创建下拉子菜单？
Posted
技术标签:
【中文标题】如何在 Bootstrap 4.1 中悬停时创建下拉子菜单？【英文标题】：How to create a dropdown submenu on hover in Bootstrap 4.1? 【发布时间】：2018-12-27 02:28:51 【问题描述】：我正在一个网站上工作，我想在其中创建一个悬停在Bootstrap 4.1 中的下拉子菜单
我用来在悬停时创建下拉菜单的 html 代码是：
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
main menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
<a class="dropdown-item" href="#">D</a>
</div>
</li>
<button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>
</ul>
</div>
问题陈述：
我想知道我应该在上面的代码中进行哪些更改，以便在 D 的 悬停时；显示下拉项目 E、F、G、H。。
【问题讨论】：
【参考方案1】：这可能对你有帮助.....
.dropdown:hover>.dropdown-menu
display: block;
.dropdown-item:hover>.dropdown-menu
display: block;
ul li
list-style-type:none;
display: inline;
.navbar-nav .nav-linkdisplay:inline-block;
.ml-auto display:inline-block!important;
.dropdown>.dropdown-toggle:active
pointer-events: none;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Dropdown submenu on hover</title>
</head>
<body>
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Main menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
<a class="dropdown-item nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
D
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">E</a>
<a class="dropdown-item" href="#">F</a>
<a class="dropdown-item" href="#">G</a>
<a class="dropdown-item" href="#">H</a>
</div>
</div>
</li>
</ul>
</div>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>【讨论】：
【参考方案2】：这个 codepen 链接有你的答案：link
基本上创建这样的结构
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">D <b class="caret"></b></a>
<ul class="dropdown-menu multi-level">
<li><a href="#">E</a></li>
<li><a href="#">F</a></li>
<li><a href="#">G</a></li>
<li class="divider"></li>
<li class="dropdown-submenu">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">H</a>
<ul class="dropdown-menu">
<li><a href="#">I</a></li>
<li><a href="#">J</a></li>
<li><a href="#">K</a></li>
</ul>
</li>
</ul>
</li>
我已经在 codepen 中为您编写了完整的代码，请在此答案上方查看链接。
【讨论】：
【参考方案3】：你只需要在css下面添加即可。
.dropdown:hover>.dropdown-menu
display: block;
.dropdown>.dropdown-toggle:active
pointer-events: none;
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">
<title>Dropdown submenu on hover</title>
</head>
<body>
<div class="navbar-collapse text-center" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
main menu
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">A</a>
<a class="dropdown-item" href="#">B</a>
<a class="dropdown-item" href="#">C</a>
<a class="dropdown-item" href="#">D</a>
</div>
</li>
<button type="submit" onclick="location.href='/M';" class="btn btn-default">R</button>
</ul>
</div>
<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.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/js/bootstrap.min.js" integrity="sha384-o+RDsa0aLu++PJvFqy8fFScvbHFLtbvScb8AjopnFD+iEQ7wo/CG0xlczd+2O/em" crossorigin="anonymous"></script>
</body>
</html>【讨论】：
【参考方案4】：-
首先，创建一个新的 CSS 文件，并将其命名为您喜欢的任何名称。在我的情况下，该文件称为“my_own.css”。
在链接到 Bootstrap 之后将其链接到您的页面。因此，到目前为止，我们有如下内容：
<link rel="stylesheet" type="text/css" href="bootstrap.css">
<link rel="stylesheet" type="text/css" href="my_own.css">
li.dropdown:hover > .dropdown-menu
display: block;
【讨论】：
【参考方案5】：我建议在媒体查询中使用 :hover 样式。 因为在移动设备上它必须是可点击的。 这是示例
/* ============ desktop view ============ */
@media all and (min-width: 992px)
.navbar .nav-item .dropdown-menu display: none;
.navbar .nav-item:hover .nav-link color: #fff;
.navbar .nav-item:hover .dropdown-menu display: block;
.navbar .nav-item .dropdown-menu margin-top:0;
/* ============ desktop view .end// ============ */
你也可以添加淡入淡出动画，代码如下：https://bootstrap-menu.com/detail-animation.html
【讨论】：
以上是关于如何在 Bootstrap 4.1 中悬停时创建下拉子菜单？的主要内容，如果未能解决你的问题，请参考以下文章
如何在 IE 中覆盖 Twitter Bootstrap 下拉悬停
单击并处于活动状态时更改 Bootstrap 4.1 .btn-outline-primary 背景？