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,在以后的使用中我们需要特别注意他们的引入顺序。




  • 20
    点赞
  • 24
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
Bootstrap弹出层是一种常用的前端组件,用于在网页中显示弹出的模态框或提示框。通过Bootstrap弹出层组件,可以实现点击按钮或链接时弹出一个模态框来展示内容、表单或其他元素。 在我们之前的文章中,我们已经在基于SpringMVC的基础框架上应用了BootStrap的后台框架,这样我们就可以很方便地使用Bootstrap弹出层组件来创建各种弹出框。 Bootstrap弹出层的使用非常简单,只需要在需要触发弹出的元素上添加相应的属性或使用JavaScript代码即可。例如,通过添加"data-toggle"属性和"data-target"属性,可以实现点击按钮时弹出一个模态框。 此外,Bootstrap还提供了丰富的配置选项,可以通过这些选项来定制弹出层的样式、位置和行为。通过设置不同的参数,可以实现不同类型的弹出层,如模态框、提示框、下拉菜单等。 需要注意的是,Bootstrap弹出层组件需要引入Bootstrap的CSS和JavaScript文件,并按照它们的组件文档提供的方式进行配置和使用。 总之,Bootstrap弹出层是一个非常实用的前端组件,可以帮助我们快速创建漂亮和功能强大的弹出框。在基于SpringMVC的项目中,我们可以结合BootStrap的后台框架来应用和定制弹出层组件,以实现更好的用户体验和交互效果。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Bootstrap框架----弹出层录入](https://blog.csdn.net/q383965374/article/details/79731617)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Java企业报表管理系统源码](https://download.csdn.net/download/m0_55416028/88269629)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值