如何解决js/jquery文件之间的冲突？

Question

我正在建立一个与姜戈和Bootstrap3 CSS的小网站。到目前为止，一切都很好，我有一些菜单，它使用数据切换下拉菜单，它也可以在第二次点击时折叠。在我的base.html中，我在末尾有这样的代码：

<!-- Bootstrap core JavaScript
            ================================================== -->
         <!-- Placed at the end of the document so the pages load faster -->
            <script src="https://code.jquery.com/jquery-1.12.4.min.js" integrity="sha384-nvAa0+6Qg9clwYCGGPpDQLVpLNn0fRaROjHqs13t4Ggj3Ez50XnGQqc/r8MhnRDZ" crossorigin="anonymous"></script>
        <!--<script>window.jQuery || document.write('<script src="../../../boot/js/jquery.min.js"><\/script>')</script>-->
        <script>window.jQuery || document.write('<script src="{% static "boot/js/jquery.min.js" %}"><\/script>')</script>
        <script src="{% static 'boot/js/bootstrap.min.js' %}"></script>

这对我来说很有效，即使我没有使用js或jquery的经验。

现在，我想要一个小部件来为我的一个表单添加datepicker plus。然后冲突就来了。根据https://pypi.org/project/django-bootstrap-datepicker-plus/的说法，我必须添加

{% load bootstrap3 %}
{% bootstrap_css %}
{% bootstrap_javascript jquery='full'%}
{{ my-form.media }}

添加到我的模板。当我这样做时，bootstrap_css会破坏我的页面设计。当我禁用这一行时，乍一看一切都很好。并且datepicker小部件可以工作。但是，下拉菜单不再起作用。

我猜这是由多个脚本组成的，但我对此了解不多，如何解决这个问题。我已经尝试将includes从base.html复制到另一个模板，等等，但都不起作用。一旦我让下拉菜单再次工作，datepicker小部件就会停止。

我很困惑，因为我认为这与includes有关，但当涉及到数据切换时，这两个bootstrap.js似乎具有相同的内容：

var r='[data-toggle="dropdown"]',o=function(t){a(t).on("click.bs.dropdown",this.toggle)};

Answer 1

我在某种程度上解决了我的问题，但我并不真正理解解决方案。但我想把这个贴在这里。也许它也能帮助其他人，也许有人可以阐明它为什么有效的解决方案。

在比较了所有重复的include并发现所有内容都包含jquery两次之后，我发现并不是jquery的版本(本地/远程、新/旧)很重要，而是include的位置和include的数量。

现在我添加了

<script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>

在base.html模板的页脚中

<script>window.jQuery || document.write('<script src="http://code.jquery.com/jquery-3.5.1.min.js"><\/script>')</script>

我发现这意味着要检查之前是否包含jquery，以及是否包含它。

其他网站也是这样讨论的，只是提到了不同位置的收录性能，但我没有发现任何东西，这个位置是如此重要。

但是，菜单不能像datepicker plus小部件那样工作。:)

现在我添加了