在 WordPress 中升级到 Bootstrap v4.0.0-beta 后，模态和下拉菜单不起作用

Posted 2023-05-08

【中文标题】在 WordPress 中升级到 Bootstrap v4.0.0-beta 后，模态和下拉菜单不起作用

【英文标题】：Modal & Dropdown is not working after upgrading to Bootstrap v4.0.0-beta in WordPress

【发布时间】：2018-02-01 00:08:26

【问题描述】：

我的 WordPress 中有以下 Modal & Dropdown，它们在 v4.0.0-alpha.6 中运行良好：

模态

 <a class="nav-link" data-toggle="modal" data-target="#navLinkSub" aria-
 haspopup="true" aria-expanded="false" href="#">
 Link</a>

 <div class="modal fade" id="navLinkSub" tabindex="-1" role="dialog" aria-
 labelledby="navLinkSub" aria-hidden="true">
 ....
 ...
 ...
 </div>

下拉菜单

<div class="dropdown">
            <button class="btn btn-light dropdown-toggle" type="button" id="navShare" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                share
            </button>
            <div class="dropdown-menu" aria-labelledby="navShare">
                <button class="dropdown-item" type="button">facebook</button>
                <button class="dropdown-item" type="button">twitter</button>
                <button class="dropdown-item" type="button">instagram</button>
            </div>
        </div>

除了将 bootstrap 升级到 v4.0.0-beta 之外，我没有更改任何在 Bootstrap 上可以正常工作的早期版本的代码。

以下是按顺序排列的 jQuery 和 Bootstrap JS 文件：

<script src="......../assets/js/jquery-3.2.1.min.js?ver=3.2.1"></script>
<script src="......../assets/bs/js/bootstrap.min.js?ver=20170722"></script>

【参考方案1】：

and modal 下拉代码看起来不错。尝试重新排列脚本。 Jquery、Popper.js 然后是 bootstrap.js。此外，您必须在之后链接它们的任何外部脚本。不要更改该顺序，这对它的工作至关重要。

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>

工作 JSFiddle：https://jsfiddle.net/pp9pdjtv/ 脚本位于屏幕左侧的外部资源选项卡中。

编辑：看来你的脚本是有序的。有可能其中一两个脚本较旧，并导致某种兼容性问题。因此，如果我的第一个修复对您不起作用，只需从 src="" 标记中获取脚本并使用快捷键 ctrl-s 将它们保存到您的目录中。然后按照我之前说明的顺序链接它们，并确保获得正确的脚本名称。

【讨论】：

谢谢。缺少 popper.js，这不是早期引导程序版本的一部分...