Bootstrap 响应式导航栏切换按钮不起作用答案

【问题标题】：Bootstrap responsive navbar toggle button not workingBootstrap 响应式导航栏切换按钮不起作用
【发布时间】：2021-01-23 09:10:17
【问题描述】：

我正在为 WordPress 开发自定义主题，目前正在使用响应式导航栏。它向我显示了切换图标，但是当我单击它时没有任何反应。

我正在使用最新版本的引导程序，直接从网站下载...

我在标题上加载了 jquery：

<script type='text/javascript' src='http://localhost/eltecnofilo/wp-includes/js/jquery/jquery.min.js?ver=3.5.1' id='jquery-core-js'></script>
<script type='text/javascript' src='http://localhost/eltecnofilo/wp-includes/js/jquery/jquery-migrate.min.js?ver=3.3.2' id='jquery-migrate-js'></script>

页脚是引导文件：

<script type='text/javascript' src='http://localhost/eltecnofilo/wp-content/themes/ElTecnofilo/bootstrap/js/bootstrap.js?ver=5.0.0' id='bootstrap-js'></script>
<script type='text/javascript' src='http://localhost/eltecnofilo/wp-content/themes/ElTecnofilo/bootstrap/js/bootstrap.esm.js?ver=5.0.0' id='bootstrap-esm-js'></script>
<script type='text/javascript' src='http://localhost/eltecnofilo/wp-content/themes/ElTecnofilo/bootstrap/js/bootstrap.bundle.js?ver=5.0.0' id='bootstrap-bundle-js'></script>

这是我的导航栏代码

<div class="row full-width black-bg">
    <nav class="navbar navbar-expand-md navbar-dark">
        <button type="button" class="navbar-toggler collapsed" data-toggle="collapse" data-target="#collapse-target aria-expanded="false" aria-controls="navbar"">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="collapse-target">
            <ul class="nav navbar-nav">
                <?php
                    $getMenu = wp_get_nav_menu_items( 'menu principal'); // Where menu1 can be ID, slug or title
                    foreach($getMenu as $item){
                        echo '<li class="nav-item"><a class="nav-link" href="' . $item->url . '">' . $item->title . '</a></li>';
                    }
                ?>
            </ul>
        </div>
    </nav>
</div>

有什么想法可能是错的吗？

【问题讨论】：

我认为如果你想要 bootstrap 提供的完全交互的小部件，你也应该包含 popper.js，我在你的脚本文件中没有看到它。
@PedroUzcátegui popper.js ???不知道，但理论上它应该在没有正确的情况下工作？
在我链接文档的答案中，它说您还需要包含 popper 才能使引导组件的many 正常工作。

标签： css bootstrap-4 wordpress-theming

【解决方案1】：

引导文档

https://getbootstrap.com/docs/5.0/getting-started/introduction/

我们的许多组件都需要使用 JavaScript 才能运行。具体来说，它们需要我们自己的 JavaScript 插件和 Popper。将以下内容之一放在页面末尾附近，对在结束标记之前，启用它们。

请记住，Bootstrap 的动态功能依赖于 Jquery 和 Popper.js。

我在您的脚本文件中没有看到 Popper.js，请尝试包含它。

https://popper.js.org/

【讨论】：