Bootstrap toggle button is not working

问题

The toggle button is not working to reveal the collapsed elements and I do not know why. When the window is resized the toggle button is displayed but upon pressing, nothing happens. This is my first time using Bootstrap so I may have made some very obvious and ridiculous mistakes. Any help is appreciated.

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="boostrap-iso">
  <div class="page">

    <div class="nav navbar-default">
      <div class="container"></div>

      <li>
        <a class="logo" href="#1"></a>
      </li>
      <li>
        <a class="cart" href="#7"></a>
      </li>

      <button class="navbar-toggle" data-toggle="dropdown" data-target="navHeaderCollapse">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>

      <div class="collapse navbar-collapse navHeaderCollapse">

        <ul>

          <li class="products"><a href="#2">Products</a>
          </li>
          <li class="store"><a href="#3">Store</a>
          </li>
          <li class="about"><a href="#4">About Us</a>
          </li>
          <li class="discover"><a href="#5">Discover</a>
          </li>
          <li class="support"><a href="#6">Support</a>
          </li>

        </ul>

      </div>

    </div>
  </div>
</div>

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

回答1:

You have at least a few problems: See the docs for the Navbar.

data-toggle="dropdown" should be data-toggle="collapse"

data-target="navHeaderCollapse" should be data-target=".navHeaderCollapse"

Fixing these two issues should allow the menu to open and close. You may want to utilize the default structure to avoid (or at least be aware of) additional issues live enclosing your toggle button inside the navbar-header class as well as the .nav & .navbar-nav classes on your menu list items. Also your container isn't doing anything currently, it should surround the navbar-header / list items.

Working Example:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />

<div class="boostrap-iso">
  <div class="page">

    <div class="nav navbar-default">
      <div class="container">

        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navHeaderCollapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>

          <a href="#" class="navbar-brand">LOGO</a>
          <a href="#" class="navbar-brand"><span class="glyphicon glyphicon-shopping-cart"></span></a>
        </div>

        <div class="collapse navbar-collapse navHeaderCollapse">
          <ul class="nav navbar-nav">
            <li class="products"><a href="#2">Products</a>
            </li>
            <li class="store"><a href="#3">Store</a>
            </li>
            <li class="about"><a href="#4">About Us</a>
            </li>
            <li class="discover"><a href="#5">Discover</a>
            </li>
            <li class="support"><a href="#6">Support</a>
            </li>
          </ul>
        </div>

      </div>
    </div>

  </div>
</div>


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

回答2:

The reason that your navbar toggle button isn't working is that you've missed 3 things.

You need to change data-toggle="dropdown" to data-toggle="collapse".
You need to change data-target="navHeaderCollapse" to data-target="#navHeaderCollapse".
You need to add id="navHeaderCollapse" to the div with the collapse css class.

Once you have all these elements the toggle will work. There are some other things missing like the navbar-header div, your container being closed in the wrong spot and the first <li> elements not being within an <ul> tag.

Here is a jsfiddle with your code working: https://jsfiddle.net/4syh8nth/9/

回答3:

Try using the # symbol in data-target attribute to refer on an element whose using this ID.

<button class="navbar-toggle" data-toggle="dropdown" data-target="#navHeaderCollapse">

And add an ID attribute to your .navbar-collapse element

<div id="navHeaderCollapse" class="collapse navbar-collapse">

Refer to the docs

The responsive navbar requires the collapse plugin to be included in your version of Bootstrap

Collapse plugin

回答4:

You may make this as like i did by bootstrap. some classes in your code i didn't recognize its bootstrap included or not. thanks

<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
</head>
<body >
<nav class="navbar navbar-inverse">
<div class="container-fluid">

<div class="collapse navbar-collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav">
<li class="products"><a href="#2">Products</a></li>
<li class="store"><a href="#3">Store</a></li>
<li class="about"><a href="#4">About Us</a></li>
<li class="discover"><a href="#5">Discover</a></li>
<li class="support"><a href="#6">Support</a></li>
</ul>
</div>
</div>
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>

</body>