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实现的抽象CSS圆角效果!!
May 03 Javascript
Riot.js 快速的JavaScript单元测试框架
Nov 09 Javascript
Jquery+ajax请求data显示在GridView上(asp.net)
Aug 27 Javascript
浅谈jQuery事件绑定原理
Jan 02 Javascript
AngularJS入门教程之控制器详解
Jul 27 Javascript
JS实现超简单的汉字转拼音功能示例
Dec 22 Javascript
ES6中字符串string常用的新增方法小结
Nov 07 Javascript
Vue手把手教你撸一个 beforeEnter 钩子函数
Apr 24 Javascript
react router4+redux实现路由权限控制的方法
May 03 Javascript
php中and 和 &amp;&amp;出坑指南
Jul 13 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
vue实现歌手列表字母排序下拉滚动条侧栏排序实时更新
May 14 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
解析php中die(),exit(),return的区别
2013/06/20 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
PHP5.5和之前的版本empty函数的不同之处
2014/06/13 PHP
ThinkPHP实现支付宝接口功能实例
2014/12/02 PHP
php自定义函数转换html标签示例
2016/09/29 PHP
jQuery(1.3.2) 7行代码搞定跟随屏幕滚动的层
2009/05/21 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
JavaScript对象数组排序实例方法浅析
2016/06/15 Javascript
jQuery 自定义下拉框(DropDown)附源码下载
2016/07/22 Javascript
JS提示:Uncaught SyntaxError: Unexpected token ILLEGAL错误的解决方法
2016/08/19 Javascript
JS实现购物车特效
2017/02/02 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
Javascript之图片的延迟加载的实例详解
2017/07/24 Javascript
详解vue-cli脚手架build目录中的dev-server.js配置文件
2017/11/24 Javascript
vue页面加载闪烁问题的解决方法
2018/03/28 Javascript
nodejs实现范围请求的实现代码
2018/10/12 NodeJs
Vue源码解析之数组变异的实现
2018/12/04 Javascript
JavaScript怎样在删除前添加确认弹出框?
2019/05/27 Javascript
js实现经典贪吃蛇小游戏
2020/03/19 Javascript
Javascript中Math.max和Math.max.apply的区别和用法详解
2020/08/24 Javascript
原生JavaScript实现换肤
2021/02/19 Javascript
把大数据数字口语化(python与js)两种实现
2013/02/21 Python
pycharm 使用心得(一)安装和首次使用
2014/06/05 Python
在Matplotlib图中插入LaTex公式实例
2020/04/17 Python
Python3与fastdfs分布式文件系统如何实现交互
2020/06/23 Python
浅谈python出错时traceback的解读
2020/07/15 Python
Python 如何查找特定类型文件
2020/08/17 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
应届大学生求职信
2013/12/01 职场文书
初中毕业生的自我评价
2014/03/03 职场文书
借款协议书
2014/04/12 职场文书
高中竞选班长演讲稿
2014/04/24 职场文书
护士实习自荐信
2015/03/06 职场文书
关于应聘教师的自荐信
2016/01/28 职场文书
Mysql分析设计表主键为何不用uuid
2022/03/31 MySQL