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目录下

bootstrap中对dropdown使用hover代替click的更多相关文章

  1. bootstrap中的dropdown组件扩展hover事件

    bootstrap的下拉组件,需要点击click时,方可展示下拉列表.因此对于喜欢简单少操作的大家来说,点击一下多少带来不便,因此,引入hover监听,鼠标经过自动展示下拉框.其实在bootstrap ...

  2. Bootstrap中的dropdown、下拉选择框、dropdown-toggle

    注意:如果您想要单独引用该插件的功能,那么您需要引用 dropdown.js.可以引用 bootstrap.js 或压缩版的 bootstrap.min.js. <!DOCTYPE html&g ...

  3. Bootstrap中DropDown插件显示下拉列表，点击下拉列表区域，不会再自动关闭。

    目标: Bootstrap中DropDown插件显示下拉列表,点击下拉列表区域,不会再自动关闭. 参考:http://v3.bootcss.com/javascript/#dropdowns    / ...

  4. bootstrap中popover.js(弹出框)使用总结+案例

    bootstrap中popover.js(弹出框)使用总结+案例 *转载请注明出处: 作者:willingtolove: http://www.cnblogs.com/willingtolove/p/ ...

  5. 优化checkbox和radio，类似Bootstrap中的iCheck

    checkbox和radio浏览器默认的已经满足不了大众的审美需求,更不用说浏览器之间的差异化,取而代之,优化checkbox和radio的方法也随之诞生了. html结构:单选框为例,简单说明: 其 ...

  6. bootstrap中使用日历控件

    在bootstrap中使用日历控件可以参照以下资料: http://www.bootcss.com/p/bootstrap-datetimepicker/index.htm 以下是参照此资料自己做的一 ...

  7. bootstrap中table页面做省市区级联效果(级联库见前面级联编辑)(非select下拉框)

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  8. Bootstrap中的less基础

    在线编译 因为 less 的语法毕竟相对简单,所以一些在线工具可以很轻松的做到.比如 http://less.cnodejs.net http://www.ostools.net/less  一般都有 ...

  9. 57、Bootstrap中文文档

    给大家介绍一个前端框架让你从此写起前端代码与之先前相比如有神助般的效果拉就是Bootstrap. 一.Bootstrap的下载 Bootstrap,由Twitter的设计师Mark Otto和Jaco ...

随机推荐

  1. ASP.NET系列：自定义配置节点的复用

    appSettings太简单,为每个程序自定义配置节点太复杂,因此要解决app.config&web.config自定义配置的复用问题. 1.读取不依赖SectionName,根节点可以定义为 ...

  2. CentOS6.3安装MySQL5.5

    1.查看系统是否安装了MySQL 使用命令: #rpm -qa | grep mysql 2.卸载已安装的MySQL 卸载mysql命令如下: #rpm -e --nodeps  mysql-libs ...

  3. Bootstrap模态框modal的高度和宽度设置

    (1)高度 将style=“height:900px”放在<div class = "modal-dialog">或者更外层上,整个模态框的高度不会发生变化 如下图所示 ...

  4. C#——获取远程xml文件

    /// <summary> /// 加载远程XML文档 /// </summary> /// <param name="URL"></pa ...

  5. Python实现简单登陆验证（文件操作）

    利用python编写一个简单的登陆验证 代码主要功能: 利用Python实现简单的登陆验证,代码主要有两个部分组成: 第一部分:登陆页面,作用是实现用户名和密码的输入 利用两个输入函数input()来 ...

  6. T-Sql之集合

    1.知识点 先了解一下集合概念,集合运算(UNION(并).EXCEPT(补).INTERSECT(交))是指表之间的垂直操作.区别联接(CROSS,INNER.OUTER)是指表之间的水平操作,基础 ...

  7. ADV三星

    #include <iostream> using namespace std; #define SIZE 12 int data[SIZE]; int data1[SIZE]; int ...

  8. 62 不同路径 leetcode JAVA

    题目: 一个机器人位于一个 m x n 网格的左上角 (起始点在下图中标记为“Start” ). 机器人每次只能向下或者向右移动一步.机器人试图达到网格的右下角(在下图中标记为“Finish”). 问 ...

  9. 【ocp-12c】最新Oracle OCP-071考试题库（40题）

    40.(8-7) choose two Which two statements are true regarding views? (Choose two.) A) A simple view in ...

  10. Kali Linux安全渗透-从入门到精通

    Kali-Linux是基于Debian Linux发行版 针对高级渗透测试和安全审计系统.带你一起从入门到精通. 什么是Kali-Linux? kali 包含几百个软件用来执行各种信息安全的任务,如渗 ...