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

Question

I am building a little website with Django and Bootstrap3 CSS. So far, everything is fine and I have some menus which use data-toggle for a dropdown, which can also collapse on the second click. In my base.html I have this code at the end:

<!-- 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>

This works for me, even as I am not experienced with js or jquery.

Now I wanted a little widget to add datepicker plus for one of my forms. And there comes the conflict. According to https://pypi.org/project/django-bootstrap-datepicker-plus/ I have to add

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

to my template. When I do this the bootstrap_css breaks my page design. When I disable that line everything looks fine at first glance. And the datepicker widget works. However, the dropdown menus do not work anymore.

I guess that the multiple script includes are responsible for that, but I do not know enough about it, how to solve this. I have already tried to copy the includes from base.html to the other template and so on, but nothing worked. And as soon as I get the dropdown menus to work again, the datepicker widget will stop.

I am puzzled because I thought that it would have to do with the includes, but both bootstrap.js seem to have the same content when it comes to data-toggle:

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

Answer 1

I kind of solved my problem, but I do not really understand the solution. But I want to post this here. Perhaps it helps someone else, too, and perhaps someone can shed some light on the solution why it works.

After comparing all the duplicate includes and seeing that everything came down to include jquery twice, I found that it's rather not the version (local/remote, new/old) of jquery, which was important, but the position of the include and the number of includes.

Now I added

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

and in the footer of the base.html template

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

as I found out that this means to check if jquery was included before and if not to include it.

Other websites and also SO discussions just mentioned the performance of different placings of the include, but I did not find anything that this position was so important.

However, not the menus work as well as the datepicker plus widget. :)

Now I added