Bootstrap—解决下拉菜单不弹出问题

最近学到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.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.js插件是基于jquery.js实现的，而我们的head之间的代码是从上往下解析执行加载的，所以要先引入jquery.js文件，方可使用bootrap.js，在以后的使用中我们需要特别注意他们的引入顺序。

Bootstrap—解决下拉菜单不弹出问题相关推荐

python tkinter 下拉框_python中tkinter入门之Menu创建顶级菜单、下拉菜单和弹出菜单。...
创建顶级菜单 Menu 组件通常被用于实现应用程序上的各种菜单.使用add_command可以添加菜单内容.创建后通过root.config()添加到窗口上. from tkinter import ...
php tinyme_黄聪：TinyMCE 4 增强添加样式、按钮、字体、下拉菜单和弹出式窗口
我最喜欢 WordPress 3.9 的更新是使用了 TinyMCE 4.0 编辑器.新的 TinyMCE 看起来看起来更整洁(真正匹配WP仪表板),它有一些非常不错的附加功能.我的很多老主题和插件必 ...
035-JAVA语言实现下拉菜单与弹出菜单功能
上一章:034-用Swing组件综合应用(实现QQ登录与注册界面功能)_CSDN专家-赖老师(软件之家)的博客-CSDN博客下一讲:036-JList列表控件使用案例讲解_CSDN专家-赖老师(软件 ...
【Java中的菜单的常用方法】下拉菜单和弹出菜单
目录 Swing菜单组件下拉式菜单下拉式菜单的三个组件的详细讲解下拉式菜单的创建与使用创建和添加下拉式菜单的一般步骤弹出式菜单弹出式菜单的创建与使用 Swing菜单组件下拉式菜单创建一 ...
解决bootstrap dropdown 下拉菜单有时候不能显示的问题
解决bootstrap dropdown 下拉菜单有时候不能显示的问题参考文章: (1)解决bootstrap dropdown 下拉菜单有时候不能显示的问题 (2)https://www.cnbl ...
Bootstrap 多级下拉菜单
在很多时候,我们可能需要多级下拉菜单.在一个下拉菜单的某个菜单项中,再创建另一个下拉菜单,即可实现多级下拉菜单. 只需为下拉菜单的任意 <li> 元素添加 .dropdown-submen ...
Bootstrap mouseover 下拉菜单 Enable Hover for Bootstrap Nav Dropdowns
Bootstrap v3′s navigation has menus toggle enabled by default - you have to click to have them open/ ...
Bootstrap 按钮下拉菜单
按钮下拉菜单,就为按钮添加一个下拉菜单,当用户点击按钮时,再显示或隐藏下拉菜单.只需把按钮和下拉菜单包装在一个 .btn-group 中,并为按钮添加 .dropdown-toggle 类和 data ...
Bootstrap级联下拉菜单，你肯定用得到
今天我将介绍自定义的bootstrap级联下拉菜单(你肯定用得到),主要应用场合有省市级关联菜单等等,那么就先拿这个例子来讲,当然其他场景的关联菜单也同样适用.说实话,封装好一个通用的组件还是需要花费 ...

Bootstrap—解决下拉菜单不弹出问题

Bootstrap—解决下拉菜单不弹出问题相关推荐

最新文章

热门文章