bootstrap中对dropdown使用hover代替click

最新推荐文章于 2024-04-20 23:48:04 发布
转载 最新推荐文章于 2024-04-20 23:48:04 发布 · 232 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/ceci/p/6282481.html
文章标签：

#测试

本文介绍了一种在Bootstrap中使用的下拉菜单扩展组件——bootstrap-hover-dropdown。此组件允许通过悬停而非点击的方式展开下拉菜单，提高了导航栏的用户体验。文章提供了引入方法及示例代码。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

    bootstrap的下拉组件需要点击click才能展示下拉列表，这在使用导航的时候很不方便因此有一个扩展的组件来解决这个问题。

在VS的Nuget中查询bootstrap-hover-dropdown即可发现该扩展。

在项目中引入该js并在需要自动展开的地方增加

data-hover="dropdown"

示例：

<a href="@nav.URL" class="dropdown-toggle" data-toggle="dropdown" data-hover="dropdown">@nav.Name <span class="caret"></span></a>

 

注意，如在MVC中使用，该js默认的安装目录是在/Content/Script目录下

转载于:https://www.cnblogs.com/ceci/p/6282481.html

ducode
关注
HTML中下拉框悬浮变色,Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
weixin_29281915的博客
06-03 511
在使用bootstrap制作后台时用到了响应式导航条，其中dropdown组件更是用的比较多，用的多需要点击的就多，dropdown默认鼠标左键单击才展开，如果使用鼠标放上去(hover)就展开则会省去点击时间，这样能提高效率。原本的改造思路是：给dropdown元素绑定hover事件，hover上去的时候，执行该元素的click事件——即把hover同步为click，hover即为click。但...
Bootstrap V3 dropdown的hover玩法
weixin_55945754的博客
01-22 884
这里记录一下Bootstrap V3 中dropdown的玩法。 在Bootstrap V3的帮助文档中，导航条中的dropdown是这样的：点击一下，然后dropdown-menu出现。要是我想鼠标放在那，然后它就出现，应该怎么办呢？ 一、思路： 让dropdown-menu(就是圈起来的地方)不显示，当鼠标在Dropdown这里悬停时，在将其显示出来。 这里因为Bootstrap样式的关系，这个dropdown-menu一开始就是收起来的。如果你是自己写的其他内容，你就可以全部写完后，将那个menu不
Bootstrap中的Dropdown下拉菜单更改为悬停(hover)触发
11-24
在使用bootstrap制作后台时用到了响应式导航条，其中dropdown组件更是用的比较多，用的多需要点击的就多，dropdown默认鼠标左键单击才展开，如果使用鼠标放上去（hover）就展开则会省去点击时间，这样能提高效率。 原本的改造思路是：给dropdown元素绑定hover事件，hover上去的时候，执行该元素的click事件——即把hover同步为click，hover即为click。 但想到与其自己来改造，不如先在网上搜索搜索看看有没有现成的插件，果不其然就搜索到了，托管在github上的代码网址：查看 在这儿就直接把代码复制出来： ;(function($, window,
bootstrap中的dropdown组件改造click为hover
lzf的博客
05-28 1716
boostrap的下拉菜单的样式 dropdown样式 如果某个列表项应用dropdown样式，则说明该列表项将会有下拉菜单 dropdown-menu样式  下拉列表应用dropdown-menu样式，表示该列表作为下拉菜单。 dropdown-toggle样式 应用dropdown样式的列表项的子元素应用dropdown-toggle样式，表示点击该元素就会
ABROAD：bootstrap中的dropdown组件改造click为hover
yw1688的专栏
03-16 1121
在使用bootstrap制作后台时用到了响应式导航条，其中dropdown组件更是用的比较多，用的多需要点击的就多，dropdown默认鼠标左键单击才展开，如果使用鼠标放上去（hover）就展开则会省去点击时间，这样能提高效率。 原本的改造思路是：给dropdown元素绑定hover事件，hover上去的时候，执行该元素的click事件——即把hover同步为click，hover即为cli
bootstrap怎么设置下拉菜单不点击，改成鼠标悬停直接显示下拉菜单
weixin_30471561的博客
09-20 854
方法一： 实际上比较简单，只需要加一个css设置下hover的状态，把下拉菜单设置成block，具体css：.nav>li:hover.dropdown-menu{display:block;} 但是主导航失去链接的效果！ 方法二： 不仅可以解决Bootstrap鼠标悬停的问题，还可以让一个菜单恢复链接实现点击下拉菜单效果是JS实现的，分析bootstrap.js文件发现...
bootstrap搜索框：click下拉展开改hover展开（两种代码）
草巾冒小子的博客
05-17 946
bootstrap搜索框：click下拉展开改hover展开（两种代码） 问题： 实现顶部导航的鼠标悬停下拉展开的效果； 实现的滚不导航区域：搜索框组件之点击下拉展开 变更为 鼠标悬停展开下拉选项条件的效果； 解决 2 中所述悬停后，鼠标下移选择时，菜单折叠消失的问题； 代码块 · 效果 · 截图 · 对比： 代码1 ： 代码 2： 主要代码 · 示下： <div class="form-inline my-2 my-lg-0"> <!-- 搜索框 --&gt
JS组件Bootstrap dropdown组件扩展hover事件
10-22
bootstrap的下拉组件，需要点击click时，方可展示下拉列表。因此对于喜欢简单少操作的大家来说，点击一下多少带来不便...这篇文章主要介绍了JS组件Bootstrap dropdown组件扩展hover事件，感兴趣的小伙伴们可以参考一下
el-dropdown默认hover展开_Bootstrap4 Dropdown 组件扩展 hover 事件
05-17
在这个示例中，我们将`el-dropdown`的`trigger`属性设置为`'hover'`，这样鼠标悬停在下拉菜单上就会自动展开了。 如果想要在鼠标移开时自动收起下拉菜单，可以使用`hide-on-click`属性。将`hide-on-click`属性设置...
JS组件Bootstrap dropdown组件扩展hover事件_javascript技巧
01-08 433
JS组件Bootstrap dropdown组件扩展hover事件_javascript技巧 bootstrap导航条当中dropdown组件用得特别频繁，本文就为大家介绍bootstrap中的dropdown组件扩展hover事件，具体内容如下 如何实现这个hover事件呢，其实在dropdown组件的点击事件的基础上很好完成的。细心者可以发现，下拉框出现时，其父级会有一个open的class属性。我们只需要监听hover事件时，给父级增加或删除open类就可以了。 boostrap-hov
bootstrap中的dropdown组件扩展hover事件
orangeabad的博客
10-17 2878
第一步：新建一个js文件，取名boostrap-hover-dropdown.js。代码如下： ;(function($, window, undefined) { // outside the scope of the jQuery plugin to // keep track of all dropdowns var $allDropdowns =
bootstrap的dropdown 改为hover触发
weixin_33851604的博客
09-11 833
参考https://github.com/ibmsoft/twitter-bootstrap-hover-dropdown 现在bootstrap 的js中添加 1 // bootstrap响应式导航条<br>;(function($, window, undefined) { 2 // outside the scope of the jQuery plug...
bootstrap V4.x 中 dropdown 增加 hover事件（优化）
猎人在吃肉
10-19 1390
bootstrap V4.x 中 dropdown 的事件 由 click 成 hover
解决hover时鼠标移动下拉二级菜单立马消失的方法
最新发布
陶十一
04-20 1205
文章说明：当我们使用hover时，经常会出现移出一级菜单时二级菜单马上消失的情况。下面就由我来为大家带来一种解决思路。
bootstrap下拉菜单点击时间的变成hover只需三步
惯性给力
11-13 525
1，首先在head中引入文件                         2，然后把下面的代码复制在nav中       Dropdown trigger             ...   3，在butoon中的 data-toggle="dropdown" aria-haspopup="true" aria-expanded="fa
bootstrap中将菜单改为鼠标滑过（bootstrap-dropdown-hover插件）
热门推荐
故梦-阿梓
03-30 1万+
出处：https://www.cnblogs.com/EnderH/archive/2016/04/09/5371712.htmlgithub：bootstrap-dropdown-hover点击下载bootstrap的下拉组件，需要点击click时，方可展示下拉列表。因此对于喜欢简单少操作的大家来说，点击一下多少带来不便，因此，引入hover监听，鼠标经过自动展示下拉框。其实在bootstrap...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值