Question

我无法使bootstrap 4下拉菜单正常工作。我知道这已经被问过了，但是我已经尝试了所有其他线程上的所有东西。当我查看控制台时，我在bootstrap.min.js和util.js上遇到“未捕获的TypeError：无法读取未定义的属性'fn'”。我不确定这是否是问题或如何解决这些错误。

这是我的标头代码：

<head>
<title>{% block title %}{% endblock %}</title>

<link rel="stylesheet" href="{% static 'css/layout.css' %}">

<link href="https://fonts.googleapis.com/css?family=Montserrat|PT+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> 
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/open-iconic/1.1.1/font/css/open-iconic-bootstrap.min.css" integrity="sha256-BJ/G+e+y7bQdrYkS2RBTyNfBHpA9IuGaPmf9htub5MQ=" crossorigin="anonymous" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel='shortcut icon' type='image/x-icon' href='/static/css/favicon.ico' />
<meta name="viewport" content="width=device-width, initial-scale=1">

 <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.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

 </head>

以下是导航栏的代码，包括下拉菜单：

<nav class="navbar navbar-expand-lg navbar-light bg-white">
    <a class="navbar-left logo" href="{% url 'home' %}"><img class="logo" src="/static/css/brand.jpg"></a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
      <div class="collapse navbar-collapse justify-content-end" id="navbarSupportedContent">
        <div class="navbar-nav">

            <form class="form-inline my-2 my-lg-0" action="{% url 'search:search_users' %}" method="GET" value="{{request.GET.q}}">
              <input class="form-control mr-sm-2" type="text" name="q" value="{{request.GET.q}}" placeholder="Search by Skill">
              <button class="btn btn-primary my-2 my-sm-0" id = "search" name="submit" type="submit" value ="Search">Search</button>
            </form>

            <div class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="" id="dropdown01" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Find Expertise</a>

              <div class="dropdown-menu" aria-labelledby="dropdown01">
                <a class="dropdown-item" href="{% url 'browse' %}">Browse Researchers</a>
                <a class="dropdown-item" href="{% url 'booking:request_expert' %}">Request Expertise</a>
                <a class="dropdown-item" href="{% url 'booking:tutorial_list' %}">Find a Tutorial</a>
              </div>
            </div>


            <a class="nav-item nav-link" href="{% url 'booking:tutorial_list' %}">TUTORIALS</a>
            <a class="nav-item nav-link" href="{% url 'faq' %}">FAQ</a>
              <a class="nav-item nav-link" href="{% url 'profile' %}">MY PROFILE</a>
              <a class="nav-item nav-link" href="{% url 'booking:booking_list' %}"> MY SCHEDULE</a>
              <a class ="nav-item nav-link" href="{% url 'logout' %}">LOGOUT</a>

        </div>
      </div>
</nav>

我还试图更改jquery，popper和bootstrap文件的顺序。此外，我尝试将这些文件替换为最新版本，但是下拉菜单仍然不起作用。该网站上的所有其他JavaScript都可以正常运行。

Answer 1

如果您正在使用某些程序包管理器。如果是，请尝试通过它安装依赖项。
导入jQuery，popper和bootstrap的最新版本。
检查。也许您使用的是已经导入jQuery的其他软件包。应该只导入一次。

Bootstrap 4下拉菜单不起作用：未捕获TypeError？

1 个答案: