Question

我有四个菜单，其中一个菜单有2个子菜单，我为此使用了引导程序，但是经过多次尝试，由于我是新手，所以没有任何解决方法。单击后，主菜单不显示子菜单。

我尝试了各种可能的方法，当我将CDN添加到我的项目中时，它工作正常。但是，当我从本地存储中添加引导文件时，它没有显示。但是其他功能运行正常

<link rel="stylesheet" href="css/bootstrap.css">
    <style>
        .header{
            height: 50px;
            background-color: black;
            margin-top: 3px;
        }

        .column{
            margin-left: 100px;
        }

    </style>
<body>
    <nav class="navbar navbar-expand-sm  navbar-dark bg-dark header">
        <a href="#" class="navbar-brand">Stone</a>
        <ul class="nav navbar-nav column">
            <li class="nav-item"><a href="#" class="nav-link">Home</a></li>
            <li class="nav-item"><a href="#" class="nav-link">Add Employee</a></li>

            <li class="nav-item dropdown">
                <a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown" id="searchEmp" role="button">Search Employee</a>
                <div class="dropdown-menu" aria-labelledby="searchEmp">
                    <a href="#" class="dropdown-item">Search With ID</a>
                    <a href="#" class="dropdown-item">Search All Employee</a>
                </div>
            </li>
            <li class="nav-item"><a href="#" class="nav-link">About</a></li>
        </ul>
    </nav>


    <script src="js/bootstrap.js"></script>
    <script src="js/jquery-3.4.1.js"></script>
</body>

在控制台中没有显示任何错误

Answer 1

Bootstrap的Javascript依赖于jQuery。这意味着为了使其正常工作，需要首先加载jQuery。如果切换以下几行，则应该可以。

<script src="js/bootstrap.js"></script>
<script src="js/jquery-3.4.1.js"></script>

Answer 2

您还需要添加popper.js才能使菜单正常工作。

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

在jquery之后但bootstrap.js之前添加此代码

菜单下的子菜单未显示

2 个答案: