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 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
JS trim去空格的最佳实践
Oct 30 Javascript
js判断样式className同时增加class或删除class
Jan 30 Javascript
jQuery 3.0 的 setter和getter 模式详解
Jul 11 Javascript
javascript类型系统——日期Date对象全面了解
Jul 13 Javascript
jQuery弹出下拉列表插件(实现kindeditor的@功能)
Aug 16 Javascript
轻松实现js选项卡切换效果
Sep 24 Javascript
angular双向绑定模拟探索
Dec 26 Javascript
AngularJS学习第二篇 AngularJS依赖注入
Feb 13 Javascript
微信小程序 动态传参实例详解
Apr 27 Javascript
JS代码简洁方式之函数方法详解
Jul 28 Javascript
解决element-ui的下拉框有值却无法选中的情况
Nov 07 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命名空间和自动加载类
2016/04/03 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
laravel返回统一格式错误码问题
2019/11/04 PHP
javascript实现添加附件功能的方法
2015/11/18 Javascript
Bootstrap媒体对象的实现
2016/05/01 Javascript
教你如何在Node.js中使用jQuery
2016/08/28 Javascript
Extjs 中的 Treepanel 实现菜单级联选中效果及实例代码
2017/08/22 Javascript
基于substring()和substr()的使用以及区别(实例讲解)
2017/12/28 Javascript
使用D3.js创建物流地图的示例代码
2018/01/27 Javascript
基于Vue实现微信小程序的图文编辑器
2018/07/25 Javascript
JavaScript中变量、指针和引用功能与操作示例
2018/08/04 Javascript
webpack的CSS加载器的使用
2018/09/11 Javascript
详解vue引入子组件方法
2019/02/12 Javascript
vue实现拖拽的简单案例 不超出可视区域
2019/07/25 Javascript
如何用vue-cli3脚手架搭建一个基于ts的基础脚手架的方法
2019/12/12 Javascript
Python实现LRU算法的2种方法
2015/06/24 Python
Python实现监控程序执行时间并将其写入日志的方法
2015/06/30 Python
python 调用c语言函数的方法
2017/09/29 Python
Python3安装Pillow与PIL的方法
2019/04/03 Python
十分钟搞定pandas(入门教程)
2019/06/21 Python
python pytest进阶之conftest.py详解
2019/06/27 Python
解析python的局部变量和全局变量
2019/08/15 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
python 自定义异常和主动抛出异常(raise)的操作
2020/12/11 Python
Python+kivy BoxLayout布局示例代码详解
2020/12/28 Python
CSS3中HSL和HSLA的简单使用示例
2015/07/14 HTML / CSS
CSS3媒体查询Media Queries基础学习教程
2016/02/29 HTML / CSS
Html5跳转到APP指定页面的实现
2020/01/14 HTML / CSS
中国领先的专业演出票务网:永乐票务
2016/08/29 全球购物
党员2014两会学习心得体会
2014/03/17 职场文书
文明工地标语
2014/06/16 职场文书
2014年教师节座谈会发言稿
2014/09/10 职场文书
毕业欢送会致辞
2015/07/29 职场文书
特种设备安全管理制度
2015/08/06 职场文书
学校标语口号大全
2015/12/26 职场文书
「月刊Comic Alive」2022年5月号封面公开
2022/03/21 日漫