javascript - Bootstrap 下拉菜单不适用于移动设备

Question

我网站上的下拉菜单无法在移动设备上打开。我遵循了网上发布的许多提示和技巧，但仍然找不到解决方法!

这是我的 html:

<nav id="nav-menu-container">
   <ul class="nav-menu">
     <li class="dropdown" data-dropdown="dropdown" >
        <button style="padding: 0 8px 10px 8px; font-face: sans-serif;color:#fff; font-weight: 700;font-size: 13px;text-transform: uppercase;opacity: 1;background-color: Transparent;border: 0pt" data-toggle="collapse" >About</button>
           <ul class="dropdown-menu" style="padding: 0 8px 10px 8px; width: 15px;font-face: sans-serif;color:#fff; font-weight: 700;font-size: 13px;text-transform: uppercase;opacity: 1;background-color: Transparent;border: 0pt">
              <li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.about') }}#who">About Us</a></li>
              <li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.about') }}#team">Team</a></li>
              <li><a style="color:#fff" tabindex="-1" href="{{ url_for('main.faq') }}">FAQ</a></li>
              <li><a style="color:#fff" tabindex="-1" href="https://www.youtube.com/watch?v=OZLNAHYpL14">Demo</a></li>
          </ul>
    </li>
  </ul>
</nav>

CSS 导入:

  <link href="lib/bootstrap/css/bootstrap.min.css" rel="stylesheet">
  <link href="lib/bootstrap/css/bootstrap-responsive.css" rel="stylesheet">

JS:

<script src="lib/bootstrap/js/bootstrap.bundle.min.js"></script>
<script src="lib/bootstrap/js/bootstrap-dropdown.js"></script>

Answer 1

将 Jquery 添加到您的脚本部分.. 需要 Bootstrap 才能正常工作..

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>