jquery - bootstrap navbar collapse 不适用于良好的 jQuery 顺序？

Question

jQuery 顺序是正确的，因为我在 jQuery 之后调用了 bootstrap.js 但 navbar 不工作。你能帮忙解释为什么那不起作用吗？

<nav class="navbar navbar-default navbar navbar-fixed-top">
    <div class="container">
        <div class="navbar-header">             
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar">
              <span class="icon-bar top-bar"> </span>
              <span class="icon-bar middle-bar"> </span>  
              <span class="icon-bar bottom-bar"> </span>
          </button>
          <a class="navbar-brand" href="#">home</a>
        </div>
        <div class="bar collapse navbar-collapse" id="myNavbar">            
            <ul class="nav navbar-nav">
                <li> <a class="navbar-brand" href="index.php"> Home </a> </li>
                <li> <a class="navbar-brand" href="About.php"> About   </a> </li>
                <li> <a class="navbar-brand" href="contact.php"> Contact </a> </li>
            </ul>
        </div>
    </div>
</nav>

Answer 1

您在 data-target 属性中缺少 #。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar">
// -----------------------------------------------------------------------------^^^^
It should be #myNavbar

下面的代码应该可以工作。

<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container">

    <div class="navbar-header">

      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">

        <span class="icon-bar top-bar"> </span>
        <span class="icon-bar middle-bar"> </span>  
        <span class="icon-bar bottom-bar"> </span> 

      </button>

      <a class="navbar-brand" href="#"> home </a>

    </div>

    <div class="bar collapse navbar-collapse" id="myNavbar" >

      <ul class="nav navbar-nav">
        <li> <a class="navbar-brand" href="index.php"> Home </a> </li>
        <li> <a class="navbar-brand" href="About.php"> About   </a> </li>
        <li> <a class="navbar-brand" href="contact.php"> Contact </a> </li>
      </ul>   

    </div>

  </div>
</nav>