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 相关文章推荐
从Ajax到JQuery Ajax学习
Feb 14 Javascript
javascript编码的几个方法详细介绍
Jan 06 Javascript
Web跨浏览器进程通信(Web跨域)
Apr 17 Javascript
javacript使用break内层跳出外层循环分析
Jan 12 Javascript
使用JQuery实现的分页插件分享
Nov 05 Javascript
对js中回调函数的一些看法
Aug 29 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
Nov 25 Javascript
Javascript计算二维数组重复值示例代码
Dec 18 Javascript
Express之get,pos请求参数的获取
May 02 Javascript
JavaScript实现三级联动效果
Jul 15 Javascript
javascript canvas API内容整理
Feb 16 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 空格,换行,跳格使用说明
2009/12/18 PHP
PHP闭包实例解析
2014/09/08 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
Yii列表定义与使用分页方法小结(3种方法)
2016/07/15 PHP
浅谈PHP SHA1withRSA加密生成签名及验签
2019/03/18 PHP
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
flash javascript之间的通讯方法小结
2008/12/20 Javascript
extjs form textfield的隐藏方法
2008/12/29 Javascript
javascript实现的像java、c#之类的sleep暂停的函数代码
2010/03/04 Javascript
html5 canvas js(数字时钟)实例代码
2013/12/23 Javascript
JavaScript中的闭包介绍
2015/03/15 Javascript
jQuery实现的多屏图像图层切换效果实例
2015/05/07 Javascript
简介JavaScript中的setHours()方法的使用
2015/06/11 Javascript
jQuery+HTML5加入购物车代码分享
2020/10/29 Javascript
jquery实现动画菜单的左右滚动、渐变及图形背景滚动等效果
2015/08/25 Javascript
JavaScript实现99乘法表及隔行变色实例代码
2016/02/24 Javascript
浅谈pc端rem字体设置的问题
2017/08/03 Javascript
Vue组件开发技巧总结
2018/03/04 Javascript
React Native中ScrollView组件轮播图与ListView渲染列表组件用法实例分析
2020/01/06 Javascript
js获取本日、本周、本月的时间代码
2020/02/01 Javascript
python3简单实现微信爬虫
2015/04/09 Python
python中pylint使用方法(pylint代码检查)
2018/04/06 Python
Pyqt5如何让QMessageBox按钮显示中文示例代码
2019/04/11 Python
Django缓存系统实现过程解析
2019/08/02 Python
详解解决Python memory error的问题(四种解决方案)
2019/08/08 Python
opencv调整图像亮度对比度的示例代码
2019/09/27 Python
CSS3中Color的一些特性介绍
2012/05/27 HTML / CSS
英国著名的药妆网站:Escentual
2016/07/29 全球购物
Coach澳大利亚官方网站:美国著名时尚奢侈品牌
2017/05/24 全球购物
OLEDBConnection和SQLConnection有什么区别
2013/05/31 面试题
招聘与培训专员岗位职责
2014/01/30 职场文书
英语一分钟演讲稿
2014/04/29 职场文书
2014年语文教学工作总结
2014/12/17 职场文书
辞职信怎么写
2015/02/27 职场文书
MySQL索引失效的典型案例
2021/06/05 MySQL
vue项目中的支付功能实现(微信支付和支付宝支付)
2022/02/18 Vue.js