Question

因此，我正在尝试开发一个带有导航栏和下拉菜单的Web应用程序。到目前为止，导航栏运行良好，所有功能均按预期运行，但是我现在尝试添加的下拉菜单并未下拉。我浏览了Bootstrap网站上的文档，但是即使直接从其网站上复制工作代码也无法解决问题。

下面是导航栏的代码部分：

enter code here
<nav className="navbar navbar-expand-lg navbar-dark bg-dark">
                <a class="navbar-brand" href="#"><img src="../Images/Brand2.png" alt="brand" width="120px" height="30px"></img></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" id="navbarSupportedContent">
                    <ul class="navbar-nav mr-auto">
                        <li> <Link to={'/InputMission'} className="nav-link active">Input Mission</Link></li>
                        <li> <Link to={'/missions'} className="nav-link">Missions</Link></li>
                        <li><Link to={'/adminActions'} className="nav-link">Admin</Link></li>
                        <li><Link to={'/testBranch'} className="nav-link">Admin Functions</Link></li>
                        <li className="nav-item dropdown">
                             <a className="nav-link dropdown-toggle" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                                Dropdown
                              </a>
                              <div className="dropdown-menu" aria-labelledby="navbarDropdown">
                                 <a className="dropdown-item" href="#">Action</a>
                                 <a className="dropdown-item" href="#">Another action</a>
                                </div>
                            </li>
         {//               <li class="nav-item dropdown"><Link to={'/adminActions'} class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false" className="nav-link">Admin</Link></li>
          //              <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          //                  <a class="dropdown-item" href="#">Add</a>
          //                  <a class="dropdown-item" href="#">Edit</a>
          //                  <a class="dropdown-item" href="#">Delete</a>
          //                  </div>
         }
                    </ul>
                </div>
            </nav>

Answer 1

更新，结果证明我的.HTML页上没有安装正确的JS脚本。现在正在工作。

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>

Answer 2

在脚本标签中添加popper.js文件可以正常工作。

下拉菜单基于第三方库Popper.js构建，该库提供了动态定位和视口检测。确保在Bootstrap的JavaScript之前包含popper.min.js或使用包含Popper.js的bootstrap.bundle.min.js / bootstrap.bundle.js。尽管不需要动态定位，但Popper.js并不用于在导航栏中定位下拉菜单。

添加此

   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" ></script>

Bootstrap下拉菜单未下拉的问题

2 个答案:

添加此