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 相关文章推荐
JS数组的遍历方式for循环与for...in
Jul 31 Javascript
JavaScript link方法入门实例(给字符串加上超链接)
Oct 17 Javascript
Javascript 构造函数详解
Oct 22 Javascript
javascript每日必学之循环
Feb 19 Javascript
基于jquery实现的银行卡号每隔4位自动插入空格的实现代码
Nov 22 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
Angular2自定义分页组件
Apr 19 Javascript
Bootstrap Table使用整理(四)之工具栏
Jun 09 Javascript
解决vue页面DOM操作不生效的问题
Mar 17 Javascript
vue-cli 脚手架基于Nightwatch的端到端测试环境的过程
Sep 30 Javascript
Vue 实现前端权限控制的示例代码
Jul 09 Javascript
JsonServer安装及启动过程图解
Feb 28 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
2006/12/14 PHP
相对路径转化成绝对路径
2007/04/10 PHP
PHP入门学习的几个不错的实例代码
2008/07/13 PHP
php用户注册页面利用js进行表单验证具体实例
2013/10/17 PHP
在Laravel框架里实现发送邮件实例(邮箱验证)
2016/05/20 PHP
thinkphp5使html5实现动态跳转的例子
2019/10/16 PHP
PHP程序员简单的开展服务治理架构操作详解(一)
2020/05/14 PHP
Extjs学习笔记之三 extjs form更多的表单项
2010/01/07 Javascript
一步一步制作jquery插件Tabs实现过程
2010/07/06 Javascript
常用的JavaScript验证正则表达式汇总
2013/11/26 Javascript
Node.js中的模块机制学习笔记
2014/11/04 Javascript
基于JS实现简单的样式切换效果代码
2015/09/04 Javascript
jQuery代码实现表格中点击相应行变色功能
2016/05/09 Javascript
Java中int与integer的区别(基本数据类型与引用数据类型)
2017/02/19 Javascript
详解vue跨组件通信的几种方法
2017/06/15 Javascript
vue2.0实现分页组件的实例代码
2017/06/22 Javascript
微信小程序 rich-text的使用方法
2017/08/04 Javascript
Vue 项目部署到服务器的问题解决方法
2017/12/05 Javascript
解决Vue打包后访问图片/图标不显示的问题
2019/07/25 Javascript
el-select 下拉框多选实现全选的实现
2019/08/02 Javascript
vue学习之Vue-Router用法实例分析
2020/01/06 Javascript
js实现页面导航层级指示效果
2020/08/25 Javascript
[19:14]DOTA2 HEROS教学视频教你分分钟做大人-维萨吉
2014/06/24 DOTA
[01:02:55]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python测试人员需要掌握的知识
2018/02/08 Python
python实现Excel文件转换为TXT文件
2019/04/28 Python
如何通过雪花算法用Python实现一个简单的发号器
2019/07/03 Python
Django使用Jinja2模板引擎的示例代码
2019/08/09 Python
Django admin.py 在修改/添加表单界面显示额外字段的方法
2019/08/22 Python
Django 项目布局方法(值得推荐)
2020/03/22 Python
Selenium webdriver添加cookie实现过程详解
2020/08/12 Python
HTML5实现签到 功能
2018/10/09 HTML / CSS
雅诗兰黛旗下专业男士保养领导品牌:Lab Series
2017/05/15 全球购物
师德师风自我剖析材料
2014/09/27 职场文书
四风专项整治工作情况汇报
2014/10/28 职场文书
2019年怎样写好导游词?
2019/07/02 职场文书