响应式网页布局Bootstrap----可折叠导航栏

  最近在学习响应式网页布局Bootstrap,今天在学可折叠导航栏时,遇到一个问题,点击右侧可折叠图标时,隐藏的导航栏显示了,但是再单击可折叠图标时,显示的导航栏却死活不隐藏。

我以为是我的代码什么地方敲错了,怎么会执行一半呢?费了半天功夫,经过比对,发现代码没有敲错什么,一度非常郁闷。后来找了一个能正常显示隐藏的案例来逐一比对,才发现问题出在js文件的引用上。
源代码如下:

<!DOCTYPE html>
<html>
<head>
		<title>可折叠导航栏</title>
  		<meta charset="utf-8">
  		<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
  		<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  		**<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  		<script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>**
  		<style>
  			img{
  				width:8rem;
  			}
  		</style>
	</head>
<body>
<nav class="navbar navbar-expand-md bg-light navbar-light">
  <a class="navbar-brand" href="#"><img src="img/qq_logo.png" alt="" /></a>
    <button class="navbar-toggler"  data-toggle="collapse" data-target="#test">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="test">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">新闻</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">视频</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">图像</a>
      </li>    
    </ul>
  </div>  
</nav>
 **<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
 <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js">	</script>**
  </body>
</html>

我在html文件的头部引用了一次js文件,在文件的结尾部分又引用了一次js文件。不知道为什么,引用两次js文件后,程序执行时,点击右侧图标,隐藏的菜单栏显示,但是再点击图标,菜单栏就不隐藏了。
而在头部或尾部只引用一次,程序就正常执行。
虽然引用了两次js,但是引用的是同一个文件,为什么就会出现这种问题呢?
不知哪位大神能解释一下其中的原因。
响应式网页布局Bootstrap----可折叠导航栏_第1张图片
响应式网页布局Bootstrap----可折叠导航栏_第2张图片

你可能感兴趣的:(响应式网页布局Bootstrap----可折叠导航栏)