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动画效果实现代码
Jul 14 Javascript
JavaScript生成GUID的多种算法小结
Aug 18 Javascript
使用firebug进行调试javascript的示例
Dec 16 Javascript
JavaScript利用构造函数和原型的方式模拟C#类的功能
Mar 06 Javascript
JavaScript函数模式详解
Nov 07 Javascript
用队列模拟jquery的动画算法实例
Jan 20 Javascript
HTML5实现留言和回复页面样式
Jul 22 Javascript
js正则表达式验证邮件地址
Nov 12 Javascript
实例详解ECMAScript5中新增的Array方法
Apr 05 Javascript
javascript 开发之百度地图使用到的js函数整理
May 19 Javascript
解决vue 路由变化页面数据不刷新的问题
Mar 13 Javascript
如何理解Vue简单状态管理之store模式
May 15 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在线打包程序源码
2008/07/27 PHP
PHP小程序自动提交到自助友情连接
2009/11/24 PHP
浅谈php函数serialize()与unserialize()的使用方法
2014/08/19 PHP
Yii中srbac权限扩展模块工作原理与用法分析
2016/07/14 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
js 父窗口控制子窗口的行为-打开,关闭,重定位,回复
2010/04/20 Javascript
window.event.keyCode兼容IE和Firefox实现js代码
2013/05/30 Javascript
JS清空多文本框、文本域示例代码
2014/02/24 Javascript
jQuery移除元素自动解绑事件实现思路及代码
2014/05/31 Javascript
Flash图片上传组件 swfupload使用指南
2015/03/14 Javascript
JQuery中attr方法和removeAttr方法用法实例
2015/05/18 Javascript
jQuery post数据至ashx实例详解
2016/11/18 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
Bootstrap入门教程一Hello Bootstrap初识
2017/03/02 Javascript
vue.js单文件组件中非父子组件的传值实例
2018/09/13 Javascript
jquery.param()实现数组或对象的序列化方法
2018/10/08 jQuery
详解无限滚动插件vue-infinite-scroll源码解析
2019/05/12 Javascript
微信小程序实现搜索框功能及踩过的坑
2020/06/19 Javascript
python3实现爬取淘宝美食代码分享
2018/09/23 Python
python去重,一个由dict组成的list的去重示例
2019/01/21 Python
Python requests模块实例用法
2019/02/11 Python
Python 脚本拉取 Docker 镜像问题
2019/11/10 Python
python 删除excel表格重复行,数据预处理操作
2020/07/06 Python
详解Canvas 实现炫丽的粒子运动效果(粒子生成文字)
2018/02/01 HTML / CSS
html5 跨文档消息传输示例探讨
2013/04/01 HTML / CSS
VisionPros美国站:加拿大在线隐形眼镜和眼镜零售商
2020/02/11 全球购物
EJB3推出JPA的原因
2013/10/16 面试题
工程力学硕士生的自我评价范文
2013/11/16 职场文书
《一个小村庄的故事》教学反思
2014/04/13 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
整改通知书
2015/04/20 职场文书
幼儿园开学家长寄语(2015秋季)
2015/05/27 职场文书
2016幼儿园中班开学寄语
2015/12/03 职场文书
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
Java对文件的读写操作方法
2022/04/29 Java/Android
postgresql之greenplum字符串去重拼接方式
2023/05/08 PostgreSQL