当我包含 Bootsrap Javascript 以使用按钮下拉菜单时，我的导航栏停止工作

Question

我只使用 links 为我的网页设置了一个普通的 NavBar，它运行良好，然后当我为按钮下拉添加 Bootstrap Javascript（不在导航栏中） ) 导航栏中的 links 停止工作。

当我删除 javascript link 时，导航栏再次开始工作。有人知道为什么吗？

<!-- Bootstrap -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<!-- Bootstrap Javascript -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>




<!-- Navbar -->
<div class="container">
    <nav class="navbar navbar-expand bg-light justify-content-between">
        <div class="container-fluid">
            <ul class="navbar-nav">
                <li class="navbar-brand">
                    <a href="/"><img src="{% static 'images/Logo Final_SM-Symbol.png' %}" width="50" height="50"></a>
                </li>
                 <li class="nav-item text-center" id="about-us">
                    <a href="{% url 'guide' %}" class="nav-link" data-toggle="modal" data-target="#"><span class="fas fa-question"></span><span class="d-none d-sm-inline d-xl-block px-1">Guide</span></a>
                 </li>
            </ul>

            <ul class="nav navbar-nav">

                {% if user.is_authenticated %}
                <li class="nav-item text-center" id="">
                    <a href="{% url 'lesson_add' %}" class="nav-link" data-toggle="modal" data-target="#"><span class="fas fa-plus"></span><span class="d-none d-sm-inline d-xl-block px-1">Add Lesson</span></a></li>
                <li class="nav-item text-center" id="">
                    <a href="{% url 'lesson_list' %}" class="nav-link" data-toggle="modal" data-target="#"><span class="fas fa-list-ol"></span><span class="d-none d-sm-inline d-xl-block px-1">Full Database</span></a></li>
                <li class="nav-item text-center" id="">
                    <a href="{% url 'search_list' %}" class="nav-link" data-toggle="modal" data-target="#"><span class="fas fa-search"></span><span class="d-none d-sm-inline d-xl-block px-1">Search Database</span></a></li>
                <li class="nav-item text-center" id="">
                    <a href="{% url 'draft_list' %}" class="nav-link"  data-toggle="modal" data-target="#"><span class="far fa-check-square"></span><span class="d-none d-sm-inline d-xl-block px-1">Draft List</span></a></li>
                <li class="nav-item text-center" id="">
                    <a class="nav-link" href="{% url 'logout' %}" data-toggle="modal" data-target="#"><span class="fas fa-sign-out-alt"></span><span class="d-none d-sm-inline d-xl-block px-1">Log Out</span></a></li>

Answer 1

bootstrap.bundle.min.js 应该向带有 data-toggle="modal" 的元素添加一个点击事件侦听器，它调用 event.preventDefault() 因为它旨在在同一页面上打开模式而不是导航到不同的页面。

如果链接不是为了打开模式，那么您应该删除属性 data-toggle="modal" 和 data-target="#"，以便它们将您带到 [=14] 中定义的 url =]

当我包含 Bootsrap Javascript 以使用按钮下拉菜单时，我的导航栏停止工作

When I include Bootsrap Javascript for using button dropdown, my navbar stops working

jquery

navbar

bootstrap-4