BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案


Posted in Javascript onDecember 14, 2016

最近学到Bootstrap下拉菜单,学懂了教程内容之后自己敲一个点击按钮底下弹出下拉菜单的小demo,写完代码发现运行之后点击按钮没反应,下拉菜单弹不出来,对照教程感觉代码没错。

我的代码如下:

<!DOCTYPE html> 
<html lang="en"> 
<head> 
 <meta charset="UTF-8"> 
 <title>下拉菜单</title> 
 <link rel="stylesheet" href="../libs/bootstrap-3.3.7/css/bootstrap.css"> 
 <script type="text/javascript" src="../libs/bootstrap-3.3.7/js/bootstrap.js"></script> 
 <script type="text/javascript" src="../libs/jquery-3.1.1.js"></script> 
</head> 
<body> 
 <div class="container" style="margin-top: 20px"> 
  <div class="dropdown"> 
   <button class="btn dropdown-toggle" id="mydropdownmenu" data-toggle="dropdown">点击弹出下来菜单</button> 
   <ul class="dropdown-menu" aria-labelledby="mydropdownmenu" role="menu"> 
    <li role="presentation"><a role="menuitem" href="#">1</a></li> 
    <li role="presentation"><a role="menuitem" href="#">2</a></li> 
    <li role="presentation"><a role="menuitem" href="#">3</a></li> 
    <li role="presentation"><a role="menuitem" href="#">4</a></li> 
    <li role="presentation"><a role="menuitem" href="#">5</a></li> 
   </ul> 
  </div> 
 </div> 
</body> 
</html>

试着贴教程中的代码,能正确运行,然后试着只将body中代码替换成教程代码,则不能正确运行。问题锁定在引入的脚本文件中。对照教程中使用的远程服务器上的文件,发现bootstrap.js和jquery-3.1.1.js引入的顺序跟我的demo引入的顺序不同。他是先引入jquery-3.1.1.js之后再引入bootstrap.js。

opera浏览器中【检查元素】打开运行网页的控制台,发现报红,如下:

BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

大概说的是bootstrap.js需要jQuery-3.1.1.js。而我们先引入bootstrap.js再引入jquery-3.1.1.js,导致在加载脚本的时候bootstrap相关规则找不到jquery中需要的内容,所以报红。

将引入的文件修改一下顺序,让jquery脚本先于bootstrap脚本导入,代码如下:

<script type="text/javascript" src="../libs/jquery-3.1.1.js"></script>
<script type="text/javascript" src="../libs/bootstrap-3.3.7/js/bootstrap.js"></script>

即可解决下拉菜单不弹出的bug。效果如下:

BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案

bootstrap.js插件是基于jquery.js实现的,而我们的head之间的代码是从上往下解析执行加载的,所以要先引入jquery.js文件,方可使用bootrap.js,在以后的使用中我们需要特别注意他们的引入顺序。

以上所述是小编给大家介绍的BootStrap 下拉菜单点击之后不会出现下拉菜单(下拉菜单不弹出)的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
使用jQuery内容过滤选择器选择元素实例讲解
Apr 18 Javascript
原生js实现半透明遮罩层效果具体代码
Jun 06 Javascript
jquery跟js初始化加载的多种方法及区别介绍
Apr 02 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
在js中做数字字符串补0(js补零)
Mar 25 Javascript
element-ui 中的table的列隐藏问题解决
Aug 24 Javascript
JS异步执行结果获取的3种解决方式
Feb 19 Javascript
JS中的算法与数据结构之列表(List)实例详解
Aug 16 Javascript
Jquery让form表单异步提交代码实现
Nov 14 jQuery
基于vue-draggable 实现三级拖动排序效果
Jan 10 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 Javascript
深入理解jquery中的each用法
Dec 14 #Javascript
Bootstrap基本模板的使用和理解1
Dec 14 #Javascript
Bootstrap栅格系统的使用和理解2
Dec 14 #Javascript
jQuery的extend方法【三种】
Dec 14 #Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 #Javascript
Bootstrap导航条的使用和理解3
Dec 14 #Javascript
jQuery学习笔记之入门
Dec 14 #Javascript
You might like
php简单封装了一些常用JS操作
2007/02/25 PHP
PHP学习资料汇总与网址
2007/03/16 PHP
PHP时间戳使用实例代码
2008/06/07 PHP
PHP 5.3和PHP 5.4出现FastCGI Error解决方法
2015/02/12 PHP
PHP生成plist数据的方法
2015/06/16 PHP
PHP编程之设置apache虚拟目录
2016/07/08 PHP
php 使用fopen函数创建、打开文件详解及实例代码
2016/09/24 PHP
yii2简单使用less代替css示例
2017/03/10 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
表单的焦点顺序tabindex和对应enter键提交
2013/01/04 Javascript
地址栏传递中文参数乱码在js里用escape转码
2013/08/28 Javascript
分享一个自己动手写的jQuery分页插件
2014/08/28 Javascript
使用AngularJS实现表单向导的方法
2015/06/19 Javascript
JS简单实现点击复制链接的方法
2016/08/03 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
JavaScript实现动态增删表格的方法
2017/03/09 Javascript
angularjs下拉框空白的解决办法
2017/06/20 Javascript
JS弹窗 JS弹出DIV并使整个页面背景变暗功能的实现代码
2018/04/21 Javascript
基于Nodejs的Tcp封包和解包的理解
2018/09/19 NodeJs
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
JavaScript实现商品评价五星好评
2020/11/30 Javascript
详解Python使用simplejson模块解析JSON的方法
2016/03/24 Python
Python 爬虫学习笔记之正则表达式
2016/09/21 Python
深入理解 Python 中的多线程 新手必看
2016/11/20 Python
Python实现MySQL操作的方法小结【安装,连接,增删改查等】
2017/07/12 Python
解决pycharm py文件运行后停止按钮变成了灰色的问题
2018/11/29 Python
PyQt5事件处理之定时在控件上显示信息的代码
2020/03/25 Python
python selenium 获取接口数据的实现
2020/12/07 Python
前端面试必备之CSS3的新特性
2017/09/05 HTML / CSS
项目管理计划书
2014/01/09 职场文书
课前三分钟演讲稿
2014/04/24 职场文书
同学聚会通知书
2015/04/20 职场文书
开票证明
2015/06/23 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
高一军训口号
2015/12/25 职场文书
SQL Server的存储过程与触发器以及系统函数和自定义函数
2022/04/10 SQL Server