javascript - Bootstrap JS 模态和菜单切换争议

Question

TL;DR 更改 Bootstrap JS 的顺序(或删除)会影响哪个模块正常工作。

我一直在寻找这个具体问题的答案，但没有什么可以完全解决这种情况......就这样。

在我的页面上，我使用 Bootstrap 在左侧有“汉堡包”下拉菜单，在右侧有一个注册按钮(用于调用模式)。这是我在 footer.php 底部调用的 JS 命令:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://apis.google.com/js/platform.js" async defer></script>
<script src="https://apis.google.com/js/api.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.min.js"></script>

通过更改 JS 的顺序，我可以使两个模块之一正常工作。让我解释一下:

情况#1(使用上面的顺序):我单击移动“汉堡包”菜单，菜单会下降，但是当再次单击时，它拒绝返回(您可以看到它稍微移动，但它仍然保持向下)。我读到这是一个多个 jQuery/js 问题。所以我继续检查我的 header 和 footer.php，没有调用其他 Bootstrap javascript。然而，当我删除 bootstrap.min.js 时，菜单切换就像一个魅力。注意:模式弹出窗口也可以完美运行。

情况#2:通过将 bootstrap.min.js 移至脚本顶部，菜单按预期工作，但现在单击注册按钮时，将短暂显示模式并然后消失。这些问题可以通过再次删除 bootstrap.min.js 来解决......

所以我的问题是，bootstrap.js 是否被任何其他脚本调用？ B/c 一旦该文件被删除，问题就不再存在!

感谢大家的帮助。

Answer 1

尝试将最后两个脚本文件的顺序切换到此。似乎 bootstrap 正在覆盖您的自定义脚本文件，因为它是在其下方声明的。一旦你删除 Bootstrap ，它似乎就像一个魅力

<script src="<?php bloginfo('template_directory'); ?>/assets/js/bootstrap.min.js"></script>
<script src="<?php bloginfo('template_directory'); ?>/assets/js/main.js"></script>

其次，您在其类中使用 bootstrap-css，但使用 main.js 来切换菜单。

所以两个脚本互相冲突您应该更改在 main.js 中调用的类，或者应该完全使用 bootstrap.js就像在 bootstrap 中一样，它调用带有 class="navbar-toggle"的按钮来切换菜单如果你在 main.js 中使用像 $(".navbar-toggle") 这样的东西，那么它们会互相干扰。

对于您的模态问题:由于它工作时间很短，因此可能是两个脚本同时调用模态切换的情况。

在 bootstrap.js 中找到模态部分并将其注释掉。