html 中使用 bootstrap 导航栏的下拉菜单出于某种原因无法正常工作

Question

所以标题很简单，我试图找到错误但看不到它，如果有人可以提供帮助。谢谢

代码如下：

<header>      
  <div class="navbar navbar-default navbar-static-top" role="navigation" id="menu-1">
    <div class="navbarheader">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a class="brand pull-left" href="index.html">
      <img alt="Logo" src="img/logoedit3.png" class="img-responsive" id="logo">
      </a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></i></b>
              <ul class="dropdown-menu">
                <li><a href="construction.html">Construction</a></li>
                <li><a href="demolition.html">Demolition</a></li>
              </ul>
          </li>
          <li><a href="safety.html">Safety</a></li>
          <li><a href="employers.html">Employers</a></li>
          <li><a href="employees.html">Employees</a></li>
          <li><a href="contact.html">Contact us</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

Answer 1

失踪

</a>

在：

<a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></i></b>

Answer 2

您发布的代码有效。请参阅以下示例。您的代码还有其他问题。也许这只是一个 z-index 问题。

jsFiddle Demo

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.min.js"></script>
<header>      
  <div class="navbar navbar-default navbar-static-top" role="navigation" id="menu-1">
    <div class="navbarheader">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
      <span class="sr-only">Toggle navigation</span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      </button>
      <a class="brand pull-left" href="index.html">
      <img alt="Logo" src="img/logoedit3.png" class="img-responsive" id="logo">
      </a>
      <div class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li class="active"><a href="index.html">Home</a></li>
          <li><a href="about.html">About</a></li>
          <li class="dropdown">
            <a href="#" class="dropdown-toggle" data-toggle="dropdown">Services <b class="caret"></i></b>
              <ul class="dropdown-menu">
                <li><a href="construction.html">Construction</a></li>
                <li><a href="demolition.html">Demolition</a></li>
              </ul>
          </li>
          <li><a href="safety.html">Safety</a></li>
          <li><a href="employers.html">Employers</a></li>
          <li><a href="employees.html">Employees</a></li>
          <li><a href="contact.html">Contact us</a></li>
        </ul>
      </div>
    </div>
  </div>
</header>

Answer 3

我找到了导致问题的原因我将 boostrap.js 放在 jquery.js 之后感谢您的帮助

html 中使用 bootstrap 导航栏的下拉菜单出于某种原因无法正常工作

dropdown menu in html using bootstrap navbar not working for some reason

html

navbar

dropdown