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 相关文章推荐
JavaScript 实现鼠标拖动元素实例代码
Feb 24 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
JavaScript中输出标签的方法
Aug 27 Javascript
使用jquery实现放大镜效果
Sep 02 Javascript
JavaScript中使用typeof运算符需要注意的几个坑
Nov 08 Javascript
js实现仿百度汽车频道选择汽车图片展示实例
May 06 Javascript
jQuery的position()方法详解
Jul 19 Javascript
jquery.form.js框架实现文件上传功能案例解析(springmvc)
May 26 Javascript
最常用的jQuery表单验证(简单)
May 23 jQuery
angular4强制刷新视图的方法
Oct 09 Javascript
layui-select动态选中值的例子
Sep 23 Javascript
Vue简单实现原理详解
May 07 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的call_user_func传reference引发的思考
2010/07/23 PHP
php通过COM类调用组件的实现代码
2012/01/11 PHP
php smarty truncate UTF8乱码问题解决办法
2014/06/13 PHP
WordPress中限制非管理员用户在文章后只能评论一次
2015/12/31 PHP
php利用递归实现删除文件目录的方法
2016/09/23 PHP
PHP简单计算两个时间差的方法示例
2017/06/20 PHP
javascript 浏览器判断 绑定事件 arguments 转换数组 数组遍历
2009/07/06 Javascript
jQuery 性能优化手册 推荐
2010/02/23 Javascript
js利用与或运算符优先级实现if else条件判断表达式
2010/04/15 Javascript
JavaScript将Table导出到Excel实现思路及代码
2013/03/13 Javascript
javascript-简单的日历实现及Date对象语法介绍(附图)
2013/05/30 Javascript
抛弃Nginx使用nodejs做反向代理服务器
2014/07/17 NodeJs
javascript操作字符串的原生方法
2014/12/22 Javascript
JS实现DIV容器赋值的方法
2015/12/14 Javascript
温习Javascript基础语法之词法结构
2016/05/31 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
2016/06/07 Javascript
概述VUE2.0不可忽视的很多变化
2016/09/25 Javascript
zTree 树插件实现全国五级地区点击后加载的示例
2018/02/05 Javascript
详解webpack import()动态加载模块踩坑
2018/07/17 Javascript
CSS3 动画卡顿性能优化的完美解决方案
2018/09/20 Javascript
Vue数据绑定实例写法
2019/08/06 Javascript
Node.js控制台彩色输出的方法与原理实例详解
2019/12/01 Javascript
Python利用正则表达式匹配并截取指定子串及去重的方法
2015/07/30 Python
Python设置matplotlib.plot的坐标轴刻度间隔以及刻度范围
2019/06/25 Python
浅谈django url请求与数据库连接池的共享问题
2019/08/29 Python
python实现从wind导入数据
2019/12/03 Python
Python解析多帧dicom数据详解
2020/01/13 Python
使用html5 canvas 画时钟代码实例分享
2015/11/11 HTML / CSS
加拿大女装网上购物:Reitmans
2016/10/20 全球购物
比利时网上药店: Drogisterij.net
2017/03/17 全球购物
医院后勤自我鉴定
2013/10/13 职场文书
2015年政务公开工作总结
2015/05/19 职场文书
红色电影观后感
2015/06/18 职场文书
商业计划书格式、范文
2019/03/21 职场文书
英文诗歌翻译方法(赏析)
2019/08/16 职场文书
导游词之开封禹王台风景区
2019/12/02 职场文书