Bootstrap 5 下拉菜单和导航：无法读取 null 的属性“孩子”

Question

当我尝试在导航栏组件中使用带有导航选项卡的下拉按钮时，我收到此 Dev Console 错误消息“无法读取属性 'children of null”。

当我单击下拉项以在导航栏中显示导航链接时，我收到此开发控制台错误消息“无法读取属性 'children of 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>

Answer 1

标签 (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>

Demo

警告：这不是引导选项卡和下拉菜单的预期用途。下拉菜单不是用来切换选项卡的，而且选项卡也不是用来在导航栏中使用的。

Answer 2

这并没有描述为什么会发生，但如果你想要一个解决方案。

删除与下拉列表项按钮相关的一些属性（例如，见下文）。根据您想要执行的操作，您可以为这些按钮设置 JavaScript 事件侦听器。或者您可以将按钮更改为锚标记并导航到不同的页面。

<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">
                Example 01
            </button>
        </li>
        <li>
            <button type="button" role="tab" id="nav-example-2-tab" class="dropdown-item">
                Example 02
            </button>
        </li>
    </ul>
</div>