javascript - Bootstrap 5 下拉菜单和导航:无法读取 null 的属性“孩子”
问题描述
当我尝试在导航栏组件中使用带有导航选项卡的下拉按钮时,我收到此开发控制台错误消息“无法读取属性 'null 的子级”。
当我单击下拉项以在导航栏中显示导航链接时,我收到此开发控制台错误消息“无法读取属性'null 的子级”
现场示例: https ://codepen.io/themes4all/pen/bGWjMzZ
HTML:
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu" aria-labelledby="dropdownEx">
<li>
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true">
Example 01
</button>
</li>
<li>
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false">
Example 02
</button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" role="button" id="navbarDropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Example 01</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" role="button" id="navbarDropdown2" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Example 02</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
解决方案
选项卡 (data-bs-toggle="tab") 应包含在nav nav-tabs
...
<nav class="navbar navbar-expand-lg navbar-light bg-light py-3">
<div class="container-fluid">
<div class="row align-items-center">
<div class="col">
<div id="nav-tab" class="dropdown" role="tablist">
<button type="button" id="dropdownEx" class="btn btn-dark dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Select Item</button>
<ul class="dropdown-menu nav nav-tabs" aria-labelledby="dropdownEx">
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-1-tab" class="dropdown-item active" data-bs-toggle="tab" data-bs-target="#nav-example-1" aria-controls="nav-example-1" aria-selected="true"> Example 01 </button>
</li>
<li class="dropdown-item p-0">
<button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item" data-bs-toggle="tab" data-bs-target="#nav-example-2" aria-controls="nav-example-2" aria-selected="false"> Example 02 </button>
</li>
</ul>
</div>
</div>
<div class="col">
<div class="tab-content">
<div role="tabpanel" id="nav-example-1" class="tab-pane fade show active" aria-labelledby="nav-example-1-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" role="button" id="navbarDropdown" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Example 01</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown"></ul>
</li>
</ul>
</div>
<div role="tabpanel" id="nav-example-2" class="tab-pane fade" aria-labelledby="nav-example-2-tab">
<ul class="navbar-nav">
<li class="nav-item dropdown">
<a href="#" role="button" id="navbarDropdown2" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">Example 02</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown2"></ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
警告:这不是引导选项卡和下拉菜单的预期用途。下拉菜单不是用来切换选项卡的,选项卡也不是用来在导航栏中使用的。
推荐阅读
- c++ - kill syscommand 在 Catch2 测试用例中产生失败
- c++ - 数组升序排序嵌套循环问题
- apache-camel - 在 Apache Camel 2.21.5 Olingo4 组件中使用 httpclientBuilder
- angular - Angular 中使用的语法是什么,例如:@NgModule 和 @Component 以及 @Injectable?(使用@符号声明)
- google-apps-script - sheet.isRowHiddenByFilter(n) 不能与切片器一起使用吗?
- php - 是否有任何解决方案可以使用 PHP 在 foreach 中使用不同的变量运行相同的查询?
- python - 如果端口更改,容器化烧瓶应用程序不会加载
- c# - c# GetDirectories 返回意外目录(给出具体示例)
- javascript - 如何查询自定义 HTML 元素?
- excel - 创建一个从列中获取日期范围的 Excel 公式