Question

我一直在学习一些引导程序并且已经移动到导航栏，我已经创建了我的导航栏，当屏幕变小时，我的导航栏移动到你经常在手机上看到的“三明治”下拉菜单，除了它点击后不起作用，我不知道为什么，我没有收到任何错误！有任何想法吗？

<!DOCTYPE html>
<html>

<head>
	<title>BootStrap Site</title>
	   <meta name="viewport" content="width=device-width, initial-scale=1">
	   <!-- Latest compiled and minified CSS -->
	   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
	   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<style>
	  .thumb{padding: 60px 10px; text-align: center; background: #fff;}
	  .thumb:nth-child(even){background: #fff;}
	  h1, h2{margin: 30px 0;}
	  .contatiner-fluid, .container{}
	  .thumb:nth-child(odd){clear: both;}
	</style>
</head>

<body>
	<nav class="navbar navbar-default">

		<div class="container-fluid">

			<div class="navbar-header">
				 <a href="/indx.html" class="navbar-brand">AWESOME TRAINING</a>
				 <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
				   <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 id="navbar" class="navbar-collapse collapse">

				 <ul class="nav navbar-nav">
				   <li><a href="#">Ninja Training</a></li>
				   <li class="active"><a href="#">Wizard Training</a></li>
				   <li><a href="#">Phsycic Training</a></li>
				   <li><a href="#">Coding Training</a></li>
				 </ul>

				<button class="btn btn-default navbar-btn navbar-right" style="margin-left: 10px;">Register</button>
				<button class="btn btn-primary navbar-btn navbar-right">Log In</button>
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
			</div>

		</div>

	</nav>

	<div class="container" style="padding-top: 60px;">
		<div class="row">
			<div class="col-xs-12">
				<h1>Navbars</h1>
				<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
				   in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
				   sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
			</div>
		</div>
	</div>

	 <script src="https://code.jquery.com/jquery-1.12.4.min.js"</script>
	 <!-- Latest compiled and minified JavaScript -->
	 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-
	 Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<script>
	  $(".nav li").on("click", function(){
		$(".nav li").removeClass("active");
		$(this).addClass("active");

	  });
	</script>

</body>

</html>

Answer 1

你缺少jQuery和jQuery bootstrap插件文件：

jQuery的：

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

Bootstrap JS：

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

需要JavaScript插件如果禁用JavaScript并且视口足够窄以致导航栏崩溃，则无法展开导航栏并查看.navbar-collapse内的内容。响应式导航栏要求折叠插件包含在您的Bootstrap版本中。

From Bootstrap docs

<!DOCTYPE html>
<html>

  <head>
     <title>BootStrap Site</title>
       <meta name="viewport" content="width=device-width, initial-scale=1">
       <!-- Latest compiled and minified CSS -->
       <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
       BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <style>
      .thumb{padding: 60px 10px; text-align: center; background: #fff;}
      .thumb:nth-child(even){background: #fff;}
      h1, h2{margin: 30px 0;}
      .contatiner-fluid, .container{}
      .thumb:nth-child(odd){clear: both;}
  </style>
</head>

     <body>
     <nav class="navbar navbar-default">

         <div class="container-fluid">

           <div class="navbar-header">
             <a href="/indx.html" class="navbar-brand">AWESOME TRAINING</a>
             <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
               <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 id="navbar" class="navbar-collapse collapse">

         <ul class="nav navbar-nav">
           <li><a href="#">Ninja Training</a></li>
           <li class="active"><a href="#">Wizard Training</a></li>
           <li><a href="#">Phsycic Training</a></li>
           <li><a href="#">Coding Training</a></li>
         </ul>

            <button class="btn btn-default navbar-btn navbar-right" style="margin-left: 10px;">Register</button>
           <button class="btn btn-primary navbar-btn navbar-right">Log In</button>
            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
          </div>

       </div>

  </nav>

                <div class="container" style="padding-top: 60px;">
                    <div class="row">
                      <div class="col-xs-12">
                        <h1>Navbars</h1>
                        <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
                          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
                           in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
                           sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
          </div>
      </div>
    </div>

 <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

          <script>
              $(".nav li").on("click", function(){
                $(".nav li").removeClass("active");
                $(this).addClass("active");

              });
          </script>

    </body>

</html>

Answer 2

没什么大不了的，你刚刚错过了jquery src URL之后的结束标记“＆gt;”。查看jQuery Script开始标记和URL结束标记之后。

    <!DOCTYPE html>
<html>

<head>
	<title>BootStrap Site</title>
	   <meta name="viewport" content="width=device-width, initial-scale=1">
	   <!-- Latest compiled and minified CSS -->
	   <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-
	   BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

	<style>
	  .thumb{padding: 60px 10px; text-align: center; background: #fff;}
	  .thumb:nth-child(even){background: #fff;}
	  h1, h2{margin: 30px 0;}
	  .contatiner-fluid, .container{}
	  .thumb:nth-child(odd){clear: both;}
	</style>
</head>

<body>
	<nav class="navbar navbar-default">

		<div class="container-fluid">

			<div class="navbar-header">
				 <a href="/indx.html" class="navbar-brand">AWESOME TRAINING</a>
				 <button class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
				   <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 id="navbar" class="navbar-collapse collapse">

				 <ul class="nav navbar-nav">
				   <li><a href="#">Ninja Training</a></li>
				   <li class="active"><a href="#">Wizard Training</a></li>
				   <li><a href="#">Phsycic Training</a></li>
				   <li><a href="#">Coding Training</a></li>
				 </ul>

				<button class="btn btn-default navbar-btn navbar-right" style="margin-left: 10px;">Register</button>
				<button class="btn btn-primary navbar-btn navbar-right">Log In</button>
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
			</div>

		</div>

	</nav>

	<div class="container" style="padding-top: 60px;">
		<div class="row">
			<div class="col-xs-12">
				<h1>Navbars</h1>
				<p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
				  Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
				   in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident,
				   sunt in culpa qui officia deserunt mollit anim id est laborum."</p>
			</div>
		</div>
	</div>

	 <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
	 <!-- Latest compiled and minified JavaScript -->
	 <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-
	 Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

	<script>
	  $(".nav li").on("click", function(){
		$(".nav li").removeClass("active");
		$(this).addClass("active");

	  });
	</script>

</body>

</html>

Answer 3

在这一行

<script src="https://code.jquery.com/jquery-1.12.4.min.js"</script>

你忽略了> char并且jquery没有加载。下面的工作代码

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

Bootstrap下拉菜单在Navbar中不起作用

3 个答案: