javascript - 引导导航栏下拉错误:index.js:60 Uncaught DOMException: Failed to execute 'querySelector' on 'Document'
问题描述
使用 bootstrap v5.0 和以下导航栏设置新站点
<nav class="navbar navbar-expand-md navbar-dark fixed-top">
<a class="navbar-brand font-orbitron" href="/">
<img src="/static/images/binoculars.png" alt="Logo" class="nav-logo">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarsExample04" aria-controls="navbarsExample04" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarsExample">
<ul class="navbar-nav mr-auto">
<li class="nav-item font-abeezee active">
<a class="nav-link" href="/" title="Kenya Professional Safari Guides Association">Home</a>
</li>
<li class="nav-item font-abeezee">
<a class="nav-link" href="/about-us" title="About Us">About Us</a>
</li>
<li class="nav-item font-abeezee">
<a class="nav-link" href="/gallery" title="Gallery">Gallery</a>
</li>
<li class="nav-item font-abeezee">
<a class="nav-link" href="/careers" title="Careers">Careers</a>
</li>
<li class="nav-item font-abeezee">
<a class="nav-link" href="/contact-us" title="Contact Us">Contact Us</a>
</li>
<li class="nav-item font-abeezee dropdown">
<a class="nav-link dropdown-toggle" href="/guides" title="Guides" role="button" data-bs-toggle="dropdown" aria-expanded="false">Guides </a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li>
<a class="dropdown-item" href="/guides/gold-membership" title="Gold-Level Members">Gold-Level Members</a>
</li>
<li>
<a class="dropdown-item" href="/guides/silver-membership" title="Silver-Level Members">Silver-Level Members</a>
</li>
<li>
<a class="dropdown-item" href="/guides/bronze-membership" title="Bronze-Level Members">Bronze-Level Members</a>
</li>
</ul>
</li>
<li class="nav-item font-abeezee">
<a class="nav-link" href="/directors-committee-members" title="Directors & Committee members" >Directors & Committees </a>
</li>
<li class="nav-item font-abeezee">
<a class="nav-link" href="/code-of-conduct" title="Code of conduct" >Code of conduct </a>
</li>
<li class="nav-item font-abeezee">
<a class="nav-link" href="/sample-questions" title="Sample KPSGA Test Questions " >Sample Questions </a>
</li>
<li class="nav-item font-abeezee">
<a class="nav-link" href="/sponsors" title="KPSGA Sponsors" >Corporate Sponsors </a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" 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>
</ul>
</div>
</nav>
当我单击下拉切换时,我收到此错误
2index.js:60 Uncaught DOMException: Failed to execute 'querySelector' on 'Document': '/guides' is not a valid selector.
at f (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:1460)
at Function.i.getParentFromElement (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:27564)
at Function.i.clearMenus (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:26834)
at i.a.toggle (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:23632)
at Function.i.dropdownInterface (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:26578)
at HTMLAnchorElement.<anonymous> (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:28967)
at HTMLDocument.i (http://127.0.0.1:8000/static/js/bootstrap.min.js:6:4685)
f @ index.js:60
i.getParentFromElement @ dropdown.js:403
i.clearMenus @ dropdown.js:352
a.toggle @ dropdown.js:134
i.dropdownInterface @ dropdown.js:334
(anonymous) @ dropdown.js:482
i @ event-handler.js:118
并且下拉菜单不起作用
解决方案
根据文档,如果你想a
用作按钮,你应该使用href="#"
而不是href="/something"
推荐阅读
- html - 按下浏览器上的后退箭头按钮后返回页面时,HTML CSS 和 JAVASCRIPT 无法正常工作
- android-jetpack-compose - 如果我使用旋转作为最后一个修饰符,为什么框不旋转?
- nuxt.js - 无法在“缓存”上执行“放置”:工作箱和 nuxt
- html - 使用 ::first-letter 后删除行下的空格
- android - CSS网格在Chrome中的Android上无法正常工作
- tensorflow - 如何修复 keras 中的重塑和分类更改错误?
- aws-api-gateway - 使用 CDK 为 AWS ApiGW 重用自定义授权方
- typescript - 如何为具有子对象的对象配置字符串索引器?
- javascript - javascript: 重新启动 SVG 动画
- angular - ERROR 错误:NG0200:DI 中检测到 DishService 的循环依赖