Bootstrap导航栏下拉菜单不生效的问题

一直在放弃

5016人浏览 · 2022-07-04 22:27:56

一直在放弃 · 2022-07-04 22:27:56 发布

Bootstrap导航栏下拉菜单不生效的问题

新手学习bootStrap时可能会遇到导航栏下拉菜单不生效的问题，常见原因有一下几点：
1.导入静态文件顺序有问题，静态文件的顺序有要求
先导入bootstrap.css，然后jquery.js，然后bootstrap.js

注意！！如果bootstrap.min.js是4.0及其以上版本的，导入顺序是jquery.min.js然后popper.min.js最后bootstrap.min.js；

2.jQuery版本较高，bootstrap版本较低。这里本人使用的是bootstrap3.0版本的，而jQuery使用的1.8.3的版本。在浏览器页面点击下拉菜单没有反应，换一个1.12.4版本的jQuery就好了；

在这里插入图片描述

<!doctype html>
<html lang="zh-CN"><!-- HTML使用中文简体 -->
  <head>
    <meta charset="utf-8"><!-- 设置HTML页面的字符集为UTF-8 -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!-- 使用IE最新的渲染模式展示页面 -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="../css/bootstrap.min.css">
	<script src="../js/jquery.min.js"></script>
	<script src="../js/bootstrap.min.js"></script>
  </head>
  <body>
	  <nav class="navbar navbar-inverse">
	    <div class="container-fluid">
	      <!-- Brand and toggle get grouped for better mobile display -->
	      <div class="navbar-header">
	        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
	          <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="navbar-brand" href="#">首页</a>
	      </div>
	  
	      <!-- Collect the nav links, forms, and other content for toggling -->
	      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
	        <ul class="nav navbar-nav">
	          <li class="active"><a href="#">电子产品 <span class="sr-only">(current)</span></a></li>
	          <li><a href="#">生活电器</a></li>
	          <li class="dropdown">
	            <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">更多 <span class="caret"></span></a>
	            <ul class="dropdown-menu">
	              <li><a href="#">Action</a></li>
	              <li><a href="#">Another action</a></li>
	              <li><a href="#">Something else here</a></li>
	              <li role="separator" class="divider"></li><!--分割线-->
	              <li><a href="#">Separated link</a></li>
	              <li role="separator" class="divider"></li><!--分割线-->
	              <li><a href="#">One more separated link</a></li>
	            </ul>
	          </li>
	        </ul>
	        <form class="navbar-form navbar-right">
	          <div class="form-group">
	            <input type="text" class="form-control" placeholder="Search">
	          </div>
	          <button type="submit" class="btn btn-default">Submit</button>
	        </form>
	        
	      </div><!-- /.navbar-collapse -->
	    </div><!-- /.container-fluid -->
	  </nav>
  </body>
</html>