html - 如何在 Bootstrap 4.3 中制作嵌入式下拉菜单?
问题描述
我正在尝试在 Bootstrap 4.3 的下拉菜单中实现下拉菜单。我尝试了这个似乎合乎逻辑但不起作用的代码。
<html>
<head>
<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>
</head>
<body>
<button class="btn btn-success" id="dropdownMenuButton" data-toggle="dropdown">Click</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<li>
<a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton1" data-toggle="dropdown">Item 1</a>
<div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton1">
<a class="dropdown-item" href="#">Submenu 1, Item 1</a>
<a class="dropdown-item" href="#">Submenu 1, Item 2</a>
</div>
</li>
<li>
<a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton2" data-toggle="dropdown">Item 2</a>
<div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton2">
<a class="dropdown-item" href="#">Submenu 2, Item 1</a>
<a class="dropdown-item" href="#">Submenu 2, Item 2</a>
</div>
</li>
</ul>
</body>
</html>
单击根菜单项时,它会关闭而不显示任何子菜单。我也尝试用这里的文档中显示的方式替换ul-li
:div-a
https: //getbootstrap.com/docs/4.3/components/dropdowns/
<html>
<head>
<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>
</head>
<body>
<button class="btn btn-success" id="dropdownMenuButton" data-toggle="dropdown">Click</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton1" data-toggle="dropdown">Item 1</a>
<div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton1">
<a class="dropdown-item" href="#">Submenu 1, Item 1</a>
<a class="dropdown-item" href="#">Submenu 1, Item 2</a>
</div>
<a class="dropdown-item" href="#" role="button" id="dropdownSubmenuButton2" data-toggle="dropdown">Item 2</a>
<div class="dropdown-menu" aria-labelledby="dropdownSubmenuButton2">
<a class="dropdown-item" href="#">Submenu 2, Item 1</a>
<a class="dropdown-item" href="#">Submenu 2, Item 2</a>
</div>
</div>
</body>
</html>
它也不起作用。但在这种情况下,单击第二个链接(项目 2)会打开第一个子菜单(子菜单 1),而不是绑定的子菜单 2。
解决方案
推荐阅读
- c++ - 是什么导致继承和成员之间结构大小的差异?
- node.js - 获取 sftp 服务器的所有支持的 KexAlgorithms
- api - 隐藏从提琴手或其他应用程序获取请求的请求/响应标头
- amazon-web-services - CloudWatch 规则不会触发 Lambda 函数,即使具有正确的权限
- swift - SwiftUI 和 macOS 按住 Option 键单击按钮
- java - Mongo DB 聚合优化(Spring Data)
- jenkins - 通过 Jenkins 但不是从终端运行时,Liquibase 校验和验证失败
- javascript - 在每个对象中创建和存储不同的数组
- r - 在 dplyr 管道中调用函数 - 最佳方法
- asp.net - .net core 3.1 如何添加HttpContext.Current和HttpContext.Current.Application[""]