Question

我一直在尝试创建一个切换按钮，但它不起作用。我在头部分包含了Jquery文件，我有所有打开和关闭的html标签。这是我到目前为止所拥有的。

<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">

    <title>
      Elephant
    </title>

  </head>
  <body>
    <div class="background">
      <div class="container">
        <nav class="navbar navbar-inverse">
          <div class="container-fluid">
            <!-- Logo -->
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              <a href="#" class="navbar-brand">THENEWBOSTON</a>
            </div>

            <!-- Menu Items -->
            <div class="collapse navbar-collapse" id="mainNavBar">
              <ul class="nav navbar-nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
              </ul>
            </div>

          </div> </nav>

      </div>
    </div>
    <!--end container-->
    </footer>

Answer 1

你拼错了属性......

data toggle="collapse"
    ^^^^---- This is single attribute. There must not be any space in between.

应该是

data-toggle="collapse"

并关闭<nav>标记。

＆＃13;

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.7/js/bootstrap.min.js"></script>
<nav class="navbar navbar-fixed-top" id="navbar">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mainNavBar">
        <span class="glyphicon glyphicon-menu-hamburger" style="color:black"></span>
      </button>
      <a class="navbar-brand" id="header"></a>
    </div>
    <div class="collapse navbar-collapse" id="mainNavBar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Collaboration</a></li>
        <li><a href="#">Prices</a></li>
      </ul>
    </div>
  </div>
</nav>

＆＃13;

包含jQuery链接后，Bootstrap切换按钮不起作用

1 个答案: