javascript - Bootstrap Navbar 下拉菜单在移动设备上不起作用

Question

这是我的导航栏代码的一部分。我正在尝试创建一个下拉菜单，但不幸的是，在移动设备上，当我单击切换而不是显示它关闭的下拉菜单时。我试图更新所有样式表引导代码和链接。我在导航栏下拉菜单上尝试过其他模型，但同样的事情

<nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="index.html">
        <img src="assets/images/mindnmovelogo.png" alt="Logo">
    </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="toggler-icon"></span>
        <span class="toggler-icon"></span>
        <span class="toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse sub-menu-bar" id="navbarSupportedContent">
        <ul id="nav" class="navbar-nav ml-auto">
            <li class="nav-item">
                <a class="page-scroll" href="#home">INDUSTRIES</a>
            </li>
            <li class="nav-item">
                <a class="page-scroll" href="#about">WHO WE ARE</a>
            </li>
            <li class="nav-item dropdown">
                <a class="page-scroll nav-link " href="#" id="navbarDropdown" data-toggle="dropdown"
                    aria-haspopup="true" aria-expanded="false"><i class="fa fa-newspaper-o"></i>WHAT WE DO</a>
                <div class="dropdown-menu" aria-labelledby="navbarDropdown">
                    <a class="dropdown-item" href="#">Link 1</a>
                    <a class="dropdown-item" href="#">Link 2</a>
                </div>
            </li>
            <li class="nav-item">
                <a class="page-scroll" href="#footer">GET IN TOUCH</a>
            </li>
        </ul>
    </div> <!-- navbar collapse -->

    <div class="navbar-btn d-none d-sm-inline-block">
        <a class="main-btn" data-scroll-nav="0" href="mailto:">GET A FREE QUOTE</a>
    </div>
</nav> <!-- navbar -->

标签： javascriptjquerycssbootstrap-4bootstrap-modal