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

最新推荐文章于 2023-09-25 19:54:05 发布

蒲公英1001

最新推荐文章于 2023-09-25 19:54:05 发布

阅读量2k

点赞数

文章标签： html5 jquery css3 javascript bootstrap

本文链接：https://blog.csdn.net/wangyining070205/article/details/106723986

版权

  最近在学习响应式网页布局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，但是引用的是同一个文件，为什么就会出现这种问题呢？
不知哪位大神能解释一下其中的原因。
在这里插入图片描述