css二级下拉菜单 Bootstrop实现多级下拉菜单功能

Bootstrap，来自 Twitter，是目前最受欢迎的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的，它简洁灵活，使得 Web 开发更加快捷。

下面给大家分享bootstrap多级下拉菜单功能的实例代码。

先给大家看下效果图：

- 需要引用bootstrap.min.css和bootstrap.min.css.js

- 代码如下

[10435]

一、 显示数据（基础功能）

在html页面中定义表格以及表格的列名，最后把从数据库中查询出来的数据，循环显示到页面中。这个系统用的是PHP语言，里边用到了PHP中的语法，如果是Java语言，把php换成jsp中对应的语法就行

在html页面中，先定义一个表格，然后到js中初始化。这个功能引用了一个第三方插件，可以到这里下载 ，这个插件是修改了 里边的一些功能后形成的。在使用过程中，我做了一些小的改动，大家用的时候可以根据情况来

1. 效果展示

表格初始化后

添加新行

2. 在使用时，首先需要引入它的js，我是统一引用到入口文件中的

在页面中定义表格，可添加自定义按钮

3. js初始化表格

需要用下拉列表的，在定义列的时候这样定义

效果如下

其它的操作，大家可以到这个插件的网站上查阅文档，或者看js源码

三、动态表头

动态表头，说到底就是每次的列数据是不固定的，根据前提条件查询数据库，再根据查询结果加载表头。有了上边的修改，实现这个功能已经不在话下，只要把初始化表格的columns替换成我们自定义的数据就可以了，做了个简单的小demo，具体的可以看【EasyUi DataGrid】动态加载列这篇文章

效果如下：

Bootstrap导航条可点击和鼠标悬停显示下拉菜单

[10427]

使用Bootstrap导航条组件时，如果你的导航条带有下拉菜单，那么这个带下拉菜单的导航在点击时只会浮出下拉菜单，它本身的href属性会失效，也就是失去了超链接功能，这并不是我想要的，我希望导航条的链接可以正常打开它的链接，但又需要下拉菜单功能，开始折腾~

首先解决带下拉菜单的导航条可以点击问题，下拉菜单效果是JS实现的，分析bootstrap.js文件发现，Bootstrap把下拉菜单写成了一个JQuery插件，在dropdown代码段中找到了关键的几句：

找到几句关键代码后，想到了解决办法，只要把其中click.bs.dropdown.data-api事件关闭就OK了，代码如下：

以上代码测试有效，导航条可点击问题解决，下面解决鼠标悬停弹下拉菜单问题，这个相对简单些，用JQuery的鼠标事件就可实现，代码如下：

小编再为大家分享一个例子：bootstrap实现鼠标悬停自动打开下拉列表框

Bootstrap的导航条下拉菜单为了适应移动设备没有鼠标hover的状态，都是点击弹出下拉菜单，为了适应一般网站使用，我稍作了一些修改，鼠标hover时就弹出二级菜单。

需要添加的CSS样式如下：

这样就可以在Bootstrap中实现鼠标悬停的下拉菜单了

如果大家还想深入学习，可以点击这里进行学习，再为大家附3个精彩的专题：

Bootstrap学习教程

Bootstrap实战教程

Bootstrap插件使用教程

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持梦搏网络。

Bootstrap基本布局实现方法详解

[10417]

看到了一篇 20 分钟打造 Bootstrap 站点的文章，内容有点老，重新使用 Bootstrap3 实现一下，将涉及的内容也尽可能详细说明。

1. 创建基本的页面