利用Chrome自带debug程序解决Bootstrap下拉框JS不生效问题

最新推荐文章于 2024-08-16 07:52:53 发布

T型人小付

最新推荐文章于 2024-08-16 07:52:53 发布

阅读量602

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/victor2code/article/details/108024884

版权

前端专栏收录该内容

26 篇文章 2 订阅

订阅专栏

今天想从Bootstrap中拷贝一段代码到自己的项目中，结果发现原封不动的官方代码，拷贝到自己本地就是不能用，记录下解决办法。

文章目录

问题现象

官方的下拉框代码如下

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
    <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>
  </ul>
</div>

将其拷贝到项目中如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<title>Bootstrap test</title>
	</head>
	<body>
		<div class="dropdown">
		  <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
		    Dropdown
		    <span class="caret"></span>
		  </button>
		  <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
		    <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>
		  </ul>
		</div>
	</body>
</html>

注意这里我已经在<head>中引入了事先下载到本地的Bootstrap官方的css和js，但是没有效果，点击下拉框按钮根本就没有内容弹出来。

问题原因

于是用Chrome自带的调试器来检查下。

在Event Listener Breakpoints下找到Sources，选择Mouse下面的click，这样只要页面中出发了鼠标点击事件就会触发断点，进而可以单步执行找到出问题的JS代码。

我在官网上进行了上面的操作，结果发现程序进入了一段jQuery脚本，我恍然大悟（其实是Google了很久被大神提醒才意识到的），Bootstrap是基于jQuery的，单单导入Bootstrap的JS是不够的，还得导入jQuery的JS，而且jQuery必须在Bootstrap之前导入。

解决办法

于是解决办法也很简单，修改下<head>

<head>
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
		<script src="./js/jquery-3.5.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<title>Bootstrap test</title>
	</head>