BootStrap实现鼠标悬停下拉列表功能


Posted in Javascript onFebruary 17, 2017

BootStrap实现鼠标悬停下拉列表功能,具体内容详情如下所示:

 //最简单的鼠标悬停,实现下拉功能,应用bootstrap框架的知识,不会bootstrap自己百度怎么使用

BootStrap实现鼠标悬停下拉列表功能

<html><head>
    <meta charset="UTF-8">
      <!-- 引入 Bootstrap -->
   <link href="../css/bootstrap.min.css" rel="external nofollow" rel="stylesheet">
     <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="../libs/jquery-1.11.1.js"></script>
    <script src="../js/bootstrap.min.js"></script>
    <title></title>
  </head>
  <body>
<div class="dropdown" >
      <span class="dropdown-toggle" data-toggle="dropdown" data-target="#" >触发器</span>
       <ul class="dropdown-menu" >
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
      </ul>
    </div>
    <script>
      $(document).ready(function(){
        $("span").hover(function(){//鼠标悬停触发事件
        $(".dropdown-toggle").dropdown('toggle');
        });
      });
    </script>
  </body>
</html>

以上所述是小编给大家介绍的BootStrap实现鼠标悬停下拉列表功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jQuery操作表格(table)的常用方法、技巧汇总
Apr 12 Javascript
JS面向对象基础讲解(工厂模式、构造函数模式、原型模式、混合模式、动态原型模式)
Aug 16 Javascript
Lua表达式和控制结构学习笔记
Dec 15 Javascript
JS实现带缓冲效果打开、关闭、移动一个层的方法
May 09 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
js获取时间函数及扩展函数的方法
Oct 30 Javascript
基于node.js之调试器详解
Aug 22 Javascript
深入理解ES6 Promise 扩展always方法
Sep 26 Javascript
vue.js配合$.post从后台获取数据简单demo分享
Aug 11 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
解决使用layui的时候form表单中的select等不能渲染的问题
Sep 18 Javascript
详解node登录接口之密码错误限制次数(含代码)
Oct 25 Javascript
javascript 判断当前浏览器版本并判断ie版本
Feb 17 #Javascript
JQuery validate 验证一个单独的表单元素实例
Feb 17 #Javascript
bootstrap fileinput 上传插件的基础使用
Feb 17 #Javascript
jQuery按需加载轮播图(web前端性能优化)
Feb 17 #Javascript
Vue.js中用webpack合并打包多个组件并实现按需加载
Feb 17 #Javascript
浅析JavaScript中var that=this
Feb 17 #Javascript
Bootstrap表格使用方法详解
Feb 17 #Javascript
You might like
PHP新手上路(十四)
2006/10/09 PHP
Laravel 5 框架入门(二)构建 Pages 的管理功能
2015/04/09 PHP
Ecshop 后台添加新功能栏目及管理权限设置教程
2017/11/21 PHP
JS 中document.URL 和 windows.location.href 的区别
2009/11/11 Javascript
javascript instanceof 内部机制探析
2010/10/15 Javascript
js获取url中的参数且参数为中文时通过js解码
2014/03/19 Javascript
javascript移出节点removeChild()使用介绍
2014/04/03 Javascript
jQuery绑定自定义事件的魔法升级版
2016/06/30 Javascript
JavaScript基础知识点归纳(推荐)
2016/07/09 Javascript
jQuery fadeOut 异步实例代码详解
2016/08/18 Javascript
Jquery树插件zTree实现菜单树
2017/01/24 Javascript
使用mint-ui实现省市区三级联动效果的示例代码
2018/02/09 Javascript
微信小程序实现保存图片到相册功能
2018/11/30 Javascript
js实现通过开始结束控制的计时器
2019/02/25 Javascript
layer.open回调获取弹出层参数的实现方法
2019/09/10 Javascript
详解微信小程序中var、let、const用法与区别
2020/01/11 Javascript
JavaScript 链表定义与使用方法示例
2020/04/28 Javascript
[39:00]Optic vs VP 2018国际邀请赛淘汰赛BO3 第三场 8.24
2018/08/25 DOTA
python 打印对象的所有属性值的方法
2016/09/11 Python
python中MethodType方法介绍与使用示例
2017/08/03 Python
django admin添加数据自动记录user到表中的实现方法
2018/01/05 Python
scrapy爬虫完整实例
2018/01/25 Python
python merge、concat合并数据集的实例讲解
2018/04/12 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
python单线程文件传输的实例(C/S)
2019/02/13 Python
PyQt 图解Qt Designer工具的使用方法
2019/08/06 Python
Numpy 中的矩阵求逆实例
2019/08/26 Python
Python批量删除mysql中千万级大量数据的脚本分享
2020/12/03 Python
《路旁的橡树》教学反思
2014/04/07 职场文书
《棉鞋里的阳光》教学反思
2014/04/24 职场文书
党员演讲稿
2014/09/04 职场文书
乡镇民主生活会发言材料
2014/10/20 职场文书
募捐感谢信
2015/01/22 职场文书
公司内部升职自荐信
2015/03/27 职场文书
css实现文章分割线样式的多种方法总结
2021/04/21 HTML / CSS
pytorch常用数据类型所占字节数对照表一览
2021/05/17 Python