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 相关文章推荐
js字符串的各种格式的转换 ToString,Format
Aug 08 Javascript
javascript加号&quot;+&quot;的二义性说明
Mar 04 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
js 3秒后跳转页面的实现代码
Mar 10 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jQuery事件用法详解
Oct 06 Javascript
基于vue.js的分页插件详解
Nov 27 Javascript
浅谈js中的bind
Mar 18 Javascript
js实现坦克移动小游戏
Oct 28 Javascript
vue-cli3中配置alias和打包加hash值操作
Sep 04 Javascript
Vue 的 v-model用法实例
Nov 23 Vue.js
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 木马攻击防御技巧
2009/06/13 PHP
PHP源码之 ext/mysql扩展部分
2009/07/17 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
ThinkPHP CURD方法之data方法详解
2014/06/18 PHP
php实现xml转换数组的方法示例
2017/02/03 PHP
Laravel 5.5 的自定义验证对象/类示例代码详解
2017/08/29 PHP
基于JQuery框架的AJAX实例代码
2009/11/03 Javascript
jQueryPad 实用的jQuery测试工具(支持IE,chrome,FF)
2010/05/22 Javascript
Javascript模块化编程(一)AMD规范(规范使用模块)
2013/01/17 Javascript
jquery 触发a链接点击事件解决方案
2013/05/02 Javascript
禁止拷贝网页内容的js代码
2014/01/22 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
jQuery实现跟随鼠标运动图层效果的方法
2015/02/02 Javascript
动态加载jQuery的方法
2015/06/16 Javascript
跟我学习javascript的作用域与作用域链
2015/11/19 Javascript
深入理解关于javascript中apply()和call()方法的区别
2016/04/12 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
canvas实现弧形可拖动进度条效果
2017/05/11 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
three.js中文文档学习之通过模块导入
2017/11/20 Javascript
angularjs1.5 组件内用函数向外传值的实例
2018/09/30 Javascript
JS实现倒计时图文效果
2018/11/17 Javascript
python系统指定文件的查找只输出目录下所有文件及文件夹
2020/01/19 Python
基于pytorch padding=SAME的解决方式
2020/02/18 Python
python中温度单位转换的实例方法
2020/12/27 Python
各大浏览器 CSS3 和 HTML5 兼容速查表 图文
2010/04/01 HTML / CSS
使用CSS3实现一个3D相册效果实例
2016/12/03 HTML / CSS
html5标记文字_动力节点Java学院整理
2017/07/11 HTML / CSS
英国领先的在线高尔夫设备零售商:Golfgeardirect
2020/12/11 全球购物
以下的初始化有什么区别
2013/12/16 面试题
品牌推广策划方案
2014/05/28 职场文书
乡镇平安建设汇报材料
2014/08/25 职场文书
学生实习证明模板汇总
2014/09/25 职场文书
酒店总经理岗位职责
2015/04/01 职场文书
2015年出纳年终工作总结
2015/05/14 职场文书
Python机器学习应用之基于线性判别模型的分类篇详解
2022/01/18 Python