html - Bootstrap - 下拉菜单和移动菜单不起作用

Question

我正在开发一个 wordpress 网站，我正在使用 bootstrap。

我的菜单必须允许下拉菜单，但是当我点击它时什么也没有打开，但是如果我检查代码 <li>在那里。

在移动设备中，切换显示，但我无法在点击时打开。单击时我看到 dom 发生了变化，但没有任何显示。

我的 html 是这样的，菜单在大屏幕上显示完美。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<nav class="navbar navbar-default">
  <div class="container-fluid no-padding">
    <div class="row no-margin">
      <div class="col-xs-4 col-sm-4 col-md-3 logo">
        <div class="navbar-header">
          <a class="navbar-brand" href="/site/">
           <img alt="site" src="<?php bloginfo('template_url')?>/images/logo.png">
                  </a>
        </div>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-9 no-padding">
        <div class="menu-operations">
          <div class="languages">

          </div>
          <div class="social">

          </div>
        </div>
      </div>
      <div class="col-xs-4 col-sm-4 col-md-9 no-padding">
        <div class="navbar-header logo-vertical">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="true">
                    <span class="sr-only">Toggle navigation</span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                  </button>
        </div>
      </div>
      <div class="col-xs-12 col-sm-12 col-md-9 no-padding">
        <div class="menu">
          <div id="bs-example-navbar-collapse-1" class="collapse navbar-collapse">
            <ul id="menu-menuprincipal" class="nav navbar-nav navbar-right">
              <li id="menu-item-39" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-39"><a title="Empresa" href="">Empresa</a></li>
              <li id="menu-item-37" class="menu-item menu-item-type-post_type menu-item-object-page current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-37 dropdown"><a title="Produção" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Produção <span class="caret"></span></a>
                <ul role="menu" class=" dropdown-menu">
                  <li id="menu-item-38" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-38 active"><a title="Produção" href="">Produção</a></li>
                  <li id="menu-item-36" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-36"><a title="Equipamentos" href="">Equipamentos</a></li>
                </ul>
              </li>
              <li id="menu-item-33" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-33"><a title="Mercados" href="">Mercados</a></li>
              <li id="menu-item-30" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children menu-item-30 dropdown"><a title="Qualidade e Ambiente" href="#" data-toggle="dropdown" class="dropdown-toggle" aria-haspopup="true">Qualidade e Ambiente <span class="caret"></span></a>
                <ul role="menu" class=" dropdown-menu">
                  <li id="menu-item-32" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-32"><a title="Qualidade" href="">Qualidade</a></li>
                  <li id="menu-item-31" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-31"><a title="Ambiente" href="">Ambiente</a></li>
                </ul>
              </li>
              <li id="menu-item-29" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-29"><a title="Notícias" href="">Notícias</a></li>
              <li id="menu-item-28" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-28"><a title="Contactos" href="">Contactos</a></li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</nav>

Answer 1

首先，您需要在页面中导入 jquery。然后再试一次，看看会发生什么

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>