javascript - 引导下拉菜单不适用于影子根
问题描述
我试图在 .js 文件中创建一个导航栏组件,这样我就可以在多个页面上使用它(不允许在这个项目中使用 react 或其他库)。我从引导程序复制了导航栏并将其粘贴到我的 navBar.js 中。CSS 样式运行良好,但是当我单击按钮时,下拉菜单没有显示。
谁能告诉我有什么问题,我该如何解决?
另一个问题,我看到一些网上评论说不要使用web components。我应该继续使用它还是只是将导航栏粘贴到我的 index.html 中(下拉按钮可以正常工作的地方)
这是我的 navBar.js:
const navTemplate = document.createElement('template');
navTemplate.innerHTML =
`
<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">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li><hr class="dropdown-divider"></li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</li>
<li class="nav-item">
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</li>
</ul>
<form class="d-flex">
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
<button class="btn btn-outline-success" type="submit">Search</button>
</form>
</div>
</div>
</nav>
`;
class NavBar extends HTMLElement{
constructor(){
super();
this.attachShadow({mode:'open'});
this.shadowRoot.appendChild(navTemplate.content);
}
connectedCallback(){
}
}
window.customElements.define('nav-bar', NavBar);
这是我的 index.html:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<h1>Hello, world!</h1>
<nav-bar></nav-bar>
<script src='../components/navBar.js'></script>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.1/dist/umd/popper.min.js" integrity="sha384-SR1sx49pcuLnqZUnnPwx6FCym0wLsk5JZuNx2bPPENzswTNFaQU1RDvt3wT4gWFG" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta3/dist/js/bootstrap.min.js" integrity="sha384-j0CNLUeiqtyaRmlzUHCPZ+Gy5fQu0dQ6eZ/xAww941Ai1SxSY+0EQqNXNE6DZiVc" crossorigin="anonymous"></script>
-->
</body>
</html>
解决方案
我通过在 carousel.css 中添加以下内容解决了这个问题,Shadow DOM 现在可以工作了!
.dropdown:hover .dropdown-menu {display: block;}
推荐阅读
- logging - 为什么rancher logging 算子同时有 Fluent Bit 和 Fluentd?
- c++ - wait_for_any/when_any/WaitAny/WhenAny:传递零期货/任务时的正确行为是什么?
- javascript - 在 Django 中更改文件名上传图片
- python - 训练或测试数据很少的多类图像分类问题
- java - 如何在不使用重复循环的情况下添加、计算和过滤那些低于平均值的元素
- python - 无法从 VALUE_STRING 值无反序列化日期实例,或者请求可能在 [line:1, column:131] 处缺少必填字段
- python - 使用日期时间索引按年计算行数
- tensorflow - 如何转换 tf2 模型,使其在 tflite 解释器上运行
- database - 如果条目不存在,则在链接数据库中创建新条目
- java - 如何确定复合数据类型的大小?