Question

我对引导程序下拉菜单有问题我有这个基本模板：

{% extends 'damage/base.html' %}

{% block body %}
<script src="{% static 'damage/bootstrap-4.1.1-dist/js/bootstrap.min.js' %}"></script>
<script src="{% static 'damage\gijgo-combined-1.9.6\js\gijgo.min.js' %}" type="text/javascript"></script>
<script src="{% static 'damage\gijgo-combined-1.9.6\js\messages\messages.el-el.js' %}" type="text/javascript"></script>

<link href="{% static 'damage\gijgo-combined-1.9.6\css\gijgo.min.css' %}" rel="stylesheet" type="text/css" />
<script src="{% static 'js\moment.js' %}" type="text/javascript"></script>

<div class="container">

... 
            <div class="col-3" align="right">

                <div class="dropdown">
                  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton"
                          data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                          style="color: white; width: 300px">
                    Επιλογή Περιόδου Ημερομηνιών
                  </button>
                  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="dateselected">
                    <li><a class="dropdown-item"  style="color: #062c33; width: 300px">Σήμερα</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #8a6d3b;">Τελευταία Εβδομάδα</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #721c24;">15-ήμερο</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #002a80;">Μήνας</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #a41515;">3-μηνο</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #333333;">6-Μηνο</a></li>
                    <li><a class="dropdown-item" href="#" style="color: #721c24;">Ετος</a></li>
                  </ul>
                </div>

            </div>

        </div>
....
         <script type="text/javascript" src="{% static 'js\criteria_dates.js' %}" ></script>

    </form>

</div>

{% endblock %}

扩展了基本模板：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{% block title %} DEYA DEMO {% endblock %}</title>
    <!-- Loads the static files -->
    {% load staticfiles %}
    <!--<link rel="stylesheet" href="{% static 'damage/bootstrap-3.3.6-dist/css/bootstrap.min.css' %}" >-->


    <link rel="stylesheet" href="{% static 'damage/bootstrap-4.1.1-dist/css/bootstrap.min.css' %}" >
    <link href="https://fonts.googleapis.com/css?family=Satisfy" rel="stylesheet" type="text/css">
    <link rel="stylesheet" type="text/css" href="{% static 'damage/style.css' %}"/>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="{% static 'damage/bootstrap-4.1.1-dist/js/bootstrap.min.js' %}"></script>
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="{% static 'damage/font-awesome-4.7.0/css/font-awesome.min.css' %}" >


</head>
<body >
    {% include 'damage/menus/navmenu.html' %}

    {% block body %}
    {% endblock %}
</body>

其中包括以下导航菜单：

        <div class="collapse navbar-collapse" id="#collapsenavbar">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-item nav-link " href="{% url 'index' %}">Αρχική<span class="sr-only">(current)</span></a>
                </li>
                <li class="nav-item link">
                    <a class="nav-item nav-link" href="{% url 'damage-add' %}">Νέα Βλάβη</a>
                </li>
                 <li class="nav-item dropdown">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                      Aναφορές
                    </a>
                    <div class="dropdown-menu">
                      <a class="dropdown-item" href="{% url 'damage-list-criteria' %}">Λίστα Βλαβών</a>
                      <a class="dropdown-item" href="#">Another action</a>
                      <a class="dropdown-item" href="#">Something else here</a>
                      <div class="dropdown-divider"></div>
                      <a class="dropdown-item" href="#">Separated link</a>
                    </div>
                </li>
                <li>
                    <a class="nav-item nav-link disabled" href="#">Disabled</a>
                </li>
            </ul>
        </div>

除了下拉菜单外，所有主题都可以正常工作问题是，当我将bootstrap.min.js放在基本模板上，然后在导航菜单（id =“ navbarDropdownMenuLink”）上的下拉菜单不起作用时，却在基本模板（id =“ dropdownMenuButton”）上起作用当我从基本模板中删除bootstrap.min.js时，下拉菜单的作用相反

我知道这是一篇很重要的文章，但是我找不到其他方法来解释我的问题

有人对此有任何线索吗？

多谢您的时间

Kostas

bootstrap.min.js在Bootstrap 4下拉菜单上的奇怪行为

0 个答案: