bootstrap的Dropdown下拉列表无法显示下来效果-解决

最新推荐文章于 2023-09-18 09:36:09 发布
最新推荐文章于 2023-09-18 09:36:09 发布
阅读量1.3k 收藏
点赞数
文章标签： bootstrap jquery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/pepper5/article/details/103669684
版权

目标实现这种
在这里插入图片描述
实际:
在这里插入图片描述
首先这是使用了bootstrap的的ui设计,所以自然需要引入相应的css和js
其次:需要引入jQuery.js,官网下载(链接下边)
jQuery.js—需要自己创建一个js文件copy保存并引入

我在导航用到了这个下拉列表,但是我把导航抽取出了一个单独的文件nav,后边使用thymeleaf引入到其他页面上的,就出现了可以显示其他的内容,但是下拉列表出不来

解决

就是在需要用到这个下拉列表的页面上引入jQuery.js,而且要先于bootstrap的js

pepper5
关注
取消Bootstrap的dropdown-menu点击默认关闭事件方法
10-18
在Bootstrap框架中，`dropdown-menu` 是一个非常实用的组件，它用于创建下拉菜单，通常与按钮或导航链接关联。然而，在某些情况下，我们可能需要自定义其默认行为，例如取消点击后自动关闭的功能。这通常是由于我们...
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
09-01
Bootstrap是一款流行的前端开发框架，它提供了许多便捷的组件，其中包括Dropdown下拉菜单。在构建响应式导航条时，Dropdown组件通常被广泛使用。默认情况下，Dropdown菜单需要用户点击才能展开，但这可能会降低交互...
点击bootstrap dropdown下拉菜单无反应 解决方法
葡萄战车的博客
04-03 1万+
1.jquery与bootstrap的依赖关系 由于bootstrap.js是依赖于jquery.js文件，所以文件的顺序应该如下表示。 导入bootstrap的.css文件 导入jquery的.js文件 导入bootstrap的.js文件 正确的导入代码如下： <link rel="stylesheet" href="css/bootstrap.min.css" type="text/...
解决bootstrap dropdown 下拉菜单有时候不能显示的问题
p15097962069的博客
08-06 882
解决bootstrap dropdown 下拉菜单有时候不能显示的问题
Rails学习笔记 使用Bootstrap下拉菜单dropdown没反应
weixin_42215775的博客
10-18 460
在使用rails练习过程中，发现使用bootstrap的下拉菜单点击没有反应，查阅资料后解决过程： 1.在Gemfile中添加 gem 'jquery-rails' 2.然后在app/assets/javascripts/application.js中将原来的bootstrap修改为 //= require jquery //= require bootstrap-sprockets 然后重新...
Bootstrap的下拉菜单dropdown失效
qq_34246965的博客
07-25 2364
运用了bootstrap-table的分页后，点击分页，无反应，F12展示console控制台报Bootstrap’sdropdownsrequirePopper.js异常这句报错，初步判断就是确实了popper.js包，于是我点进去看了看bootstrap的javascript代码，确实需要导入popper.js。...
Bootstrap dropdown下拉菜单没反应解决方法
鼬的博客
11-05 4540
参照网上解决方法是：导入的.js顺序错误 1.导入bootstrap的.css文件 2.导入jquery的.js文件 3.导入bootstrap的.js文件 依照以上还未解决，采用一下方法试试：
Bootstrap 下拉菜单.dropdown的具体使用方法
08-29
Bootstrap 下拉菜单.dropdown 的具体使用方法 Bootstrap 下拉菜单.dropdown 是一个常用的前端组件，用于提供用户交互式的菜单选项。在 Bootstrap 框架中，下拉菜单.dropdown 是一个非常重要的组件，广泛应用于各种 ...
bootstrap下拉列表与输入框组结合的样式调整
09-01
在Bootstrap中，输入框组（Input Groups）和下拉列表（Dropdowns）是两个常用的功能，它们可以组合使用，以创建更复杂的用户界面。下面我们将深入探讨如何在Bootstrap中调整下拉列表与输入框组结合的样式。 首先，...
Bootstrap实现下拉菜单多级联动
08-28
在 Bootstrap 中，下拉菜单是通过 `.dropdown` 类来实现的。要创建一个下拉菜单，只需要在 HTML 结构中添加该类，并将菜单项包装在 `<ul>` 元素中。例如： ```html <div class="dropdown"> ...
Bootstrap.js中下拉菜单dropdown-toggle失效问题
qq_40224863的博客
03-23 3378
问题描述： 动态加载一个html页面，其中dropdown-toggle点击无效 问题原因： 这是因为动态加载页面中重复加载Bootstrap.js导致的dropdown-toggle点击无效。 解决方法： 可以去除动态页面中的Bootstrap.js。 （这是我碰到的一个解决方法） ...
BootStrap下拉菜单点击不显示效果
weixin_44868200的博客
09-27 3160
文章目录BootStrap下拉菜单点击不显示效果的原因 BootStrap下拉菜单点击不显示效果的原因 不会出现下拉菜单效果的原因？ 引入顺序问题 <link href="css/bootstrap.min.css" rel="stylesheet" /> <script type="text/javascript" src="js/jquery-2.1.1.min.js"></script> <script type="text/javascript" sr
overflow 导致bootstrap popover\dropdown-menu 失效
pehao的博客
02-16 707
overflow 导致bootstrap popover\dropdown-menu 失效
boostrap下拉列表点击不显示，没反应
fenger_c的博客
03-13 684
https://blog.youkuaiyun.com/qq_39162733/article/details/78063701?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task。 以上这篇文章解决了我的问题，这种情况已经不是第一次发生了，但是每次解决过段...
【解决方法】点击bootstrap上的下拉菜单无反应
热门推荐
qq_39162733的博客
09-22 2万+
遇到问题是：点击bootstrap里的下拉菜单没有反应 正常情况是点击时应该 class="dropdown user user-menu" 变为 class="dropdown user user-menu open" aria-expanded="false" 变为 aria-expanded="true" 这样下拉菜单会出来 参照网上解决方法是
bootstrap class="dropdown" 下拉菜单时而生效、时而失效的原因
weixin_30896511的博客
02-25 1315
html 文件中，发现有两个版本的bootstrap.min.js 文件引入，删除较早的版本(3.0.0版)，保留（3.3.5版）问题似乎解决，但需进一步验证，待后续跟进。 转载于:https://www.cnblogs.com/wag-tail-118/p/8469995.html...
bootstrap 下拉菜单不显示的解决办法
weixin_34194551的博客
11-10 1788
bootstrap 下拉菜单不显示，最后改成如下正常显示： &lt;div class="btn-group open"&gt; &lt;ul class="dropdown-menu"&gt; &lt;li&gt;&lt;a href="#"&gt;Menu1&lt;/a&gt;&lt;/li&gt;
boostarp5导航条中下拉框不生效问题并报错
jiadomg的博客
09-18 585
解决bootstarp5中导航条中的下拉框不生效
bootstrap dropdown下拉菜单中设置下拉菜单
最新发布
01-05
### 配置 Bootstrap Dropdown 组件中的下拉菜单项 在 Bootstrap 中，`dropdown-menu` 类用于定义下拉菜单容器，默认情况下该容器内的项目是隐藏的，通过 `display:none;` 实现[^1]。要创建并配置下拉菜单项，需遵循特定结构： #### 基本 HTML 结构 为了使下拉功能正常工作，HTML 结构应包含触发器和菜单列表两部分。具体来说，就是使用带有 `.dropdown` 的 div 容器包裹链接或按钮作为触发元素以及无序列表 `<ul>` 来容纳各个选项。 ```html <div class="dropdown"> <!-- 触发器 --> <a class="dropdown-toggle" data-bs-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">Dropdown Trigger</a> <!-- 菜单列表 --> <ul class="dropdown-menu" aria-labelledby="dropdownMenuLink"> <li><a class="dropdown-item" href="#">Action One</a></li> <li><a class="dropdown-item" href="#">Another action</a></li> <li><hr class="dropdown-divider"></li> <!-- 可选分隔线 --> <li><a class="dropdown-item" href="#">Something else here</a></li> </ul> </div> ``` 上述代码展示了如何构建一个简单的下拉菜单，其中包含了三个可点击条目及一条分割线[^2]。 对于希望调整显示方向的情况，比如让菜单向上展开而不是向下的场景，则可以在最外层的 `.dropdown` 上添加 `.dropup` 类来改变其行为模式[^3]。 另外，在自定义样式方面，除了利用内置类之外还可以借助额外 CSS 或者文本工具类来自由修改外观效果[^4]。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值