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

今天想从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="#">Actiona>li>
    <li><a href="#">Another actiona>li>
    <li><a href="#">Something else herea>li>
    <li role="separator" class="divider">li>
    <li><a href="#">Separated linka>li>
  ul>
div>

将其拷贝到项目中如下


<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 testtitle>
	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="#">Actiona>li>
		    <li><a href="#">Another actiona>li>
		    <li><a href="#">Something else herea>li>
		    <li role="separator" class="divider">li>
		    <li><a href="#">Separated linka>li>
		  ul>
		div>
	body>
html>

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

问题原因

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

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

利用Chrome自带debug程序解决Bootstrap下拉框JS不生效问题_第1张图片

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

解决办法

于是解决办法也很简单,修改下

<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 testtitle>
	head>

之后成功实现官网的效果。

其实所有Bootstrap的JS效果都是基于jQuery的,所以官方的代码没达到效果可以首先看看有没有成功导入两个JS。

我是T型人小付,一位坚持终身学习的互联网从业者。喜欢我的博客欢迎在csdn上关注我,如果有问题欢迎在底下的评论区交流,谢谢。

你可能感兴趣的:(前端)