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 相关文章推荐
显示、隐藏密码
Jul 01 Javascript
jquery 插件学习(二)
Aug 06 Javascript
Jquery带搜索框的下拉菜单
May 06 Javascript
js动态创建及移除div的方法
Jun 03 Javascript
深入理解JavaScript编程中的原型概念
Jun 25 Javascript
Bootstrap框架动态生成Web页面文章内目录的方法
May 12 Javascript
JS的函数调用栈stack size的计算方法
Jun 24 Javascript
图解javascript作用域链
May 27 Javascript
浅谈Vue的响应式原理
May 30 Javascript
微信小程序 可搜索的地址选择实现详解
Aug 28 Javascript
vue点击按钮动态创建与删除组件功能
Dec 29 Javascript
微信小程序实现带放大效果的轮播图
May 26 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
Windows下的PHP5.0详解
2006/11/18 PHP
谈谈新手如何学习PHP 默默经典版本
2009/08/04 PHP
PHP 文件上传源码分析(RFC1867)
2009/10/30 PHP
php生成4位数字验证码的实现代码
2015/11/23 PHP
js 模拟气泡屏保效果代码
2010/07/10 Javascript
js最简单的拖拽效果实现代码
2010/09/24 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
深入理解React中es6创建组件this的方法
2016/08/29 Javascript
vue 2.0组件与v-model详解
2017/03/27 Javascript
配置nodejs环境的方法
2017/05/13 NodeJs
详解vee-validate的使用个人小结
2017/06/07 Javascript
vue改变循环遍历后的数据实例
2019/11/07 Javascript
纯js+css实现在线时钟
2020/08/18 Javascript
element-ui中dialog弹窗关闭按钮失效的解决
2020/09/22 Javascript
[01:13:59]LGD vs Mineski Supermajor 胜者组 BO3 第三场 6.5
2018/06/06 DOTA
[01:11:48]Fnatic vs IG 2018国际邀请赛小组赛BO2 第二场 8.17
2018/08/18 DOTA
详解Python3中yield生成器的用法
2015/08/20 Python
django之跨表查询及添加记录的示例代码
2018/10/16 Python
Python中Proxypool库的安装与配置
2018/10/19 Python
Python Numpy 实现交换两行和两列的方法
2019/06/26 Python
python隐藏类中属性的3种实现方法
2019/12/19 Python
Python实现实时数据采集新型冠状病毒数据实例
2020/02/04 Python
浅谈Python里面None True False之间的区别
2020/07/09 Python
Python 爬虫性能相关总结
2020/08/03 Python
html5手机端页面可以向右滑动导致样式受影响的问题
2018/06/20 HTML / CSS
h5页面唤起app如果没安装就跳转下载(iOS和Android)
2020/06/03 HTML / CSS
AmazeUI 模态窗口的实现代码
2020/08/18 HTML / CSS
去加拿大的旅行和假期:Canadian Affair
2016/10/25 全球购物
Jacadi Paris英国官网:法国童装品牌
2019/08/09 全球购物
教师求职推荐信范文
2013/11/20 职场文书
集团公司党的群众路线教育实践活动工作总结
2014/03/03 职场文书
初中英语演讲稿
2014/04/29 职场文书
10的分与合教学反思
2014/04/30 职场文书
2016高三毕业赠言寄语
2015/12/04 职场文书