当我尝试在导航栏组件中使用带有导航选项卡的下拉按钮时,我收到此开发控制台错误消息“无法读取属性'null的子项”。
当我点击下拉菜单项以在导航栏中显示导航链接时,我收到开发人员控制台错误消息“Cannot read property 'children of null”
实时示例:https://codepen.io/themes4all/pen/bGWjMzZ
超文本标记语言:
<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>
3条答案
按热度按时间ztigrdn81#
选项卡(data-bs-toggle=“选项卡”)应包含在
nav nav-tabs
...Demo
**警告:**这不是引导选项卡和下拉菜单的预期用途。下拉菜单不用于切换选项卡,选项卡也不用于导航栏。
5kgi1eie2#
这并不说明问题发生的原因,而是说明您是否需要解决方案。
删除与下拉列表项按钮关联的一些属性(例如,请参阅下面的示例)。根据您的需要,您可以为这些按钮设置JavaScript事件侦听器。或者您可以将按钮更改为锚标记并导航到其他页面。
fhg3lkii3#
“叶”菜单项(如 * 示例1* 和 * 示例2*)不应包含
data-bs-toggle="dropdown"