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 相关文章推荐
兼容IE、FireFox、Chrome等浏览器的xml处理函数js代码
Nov 30 Javascript
jquery幻灯片插件bxslider样式改进实例
Oct 15 Javascript
图解js图片轮播效果
Dec 20 Javascript
JavaScript实现简单的tab选项卡切换
Jan 05 Javascript
JavaScript通过使用onerror设置默认图像显示代替alt
Mar 01 Javascript
jQuery中队列queue()函数的实例教程
May 03 Javascript
js自定义select下拉框美化特效
May 12 Javascript
原生js轮播特效
May 18 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
Nuxt.js SSR与权限验证的实现
Nov 21 Javascript
vue自定义右键菜单之全局实现
Apr 09 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摘要生成函数(无乱码)
2012/02/04 PHP
php include类文件超时问题处理
2015/02/06 PHP
PHP中的类型提示(type hinting)功能介绍
2015/07/01 PHP
完美利用Yii2微信后台开发的系列总结
2016/07/18 PHP
JavaScript 动态创建VML的方法
2009/10/14 Javascript
各浏览器对click方法的支持差异小结
2011/07/31 Javascript
node.js chat程序如何实现Ajax long-polling长链接刷新模式
2012/03/13 Javascript
Bootstrap每天必学之标签与徽章
2015/11/27 Javascript
利用jQuery设计一个简单的web音乐播放器的实例分享
2016/03/08 Javascript
jquery点击改变class并toggle的实现代码
2016/05/15 Javascript
javascript的replace方法结合正则使用实例总结
2016/06/16 Javascript
AngularJS入门教程之Helloworld示例
2016/12/25 Javascript
javascript事件的绑定基础实例讲解(34)
2017/02/14 Javascript
vue.js 1.x与2.0中js实时监听input值的变化
2017/03/15 Javascript
微信小程序开发之animation循环动画实现的让云朵飘效果
2017/07/14 Javascript
jquery+css3实现熊猫tv导航代码分享
2018/02/12 jQuery
在vue中使用css modules替代scroped的方法
2018/03/10 Javascript
VUE脚手架的下载和配置步骤详解
2019/04/01 Javascript
python密码错误三次锁定(实例讲解)
2017/11/14 Python
使用Python读取大文件的方法
2018/02/11 Python
基于python-opencv3的图像显示和保存操作
2019/06/27 Python
基于CSS3特效之动画:animation的应用
2013/05/09 HTML / CSS
HTML5 Canvas中绘制矩形实例
2015/01/01 HTML / CSS
BCBG官网:BCBGMAXAZRIA
2017/12/29 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
世界上最大的在线汽车租赁预订平台:Rentalcars.com(支持中文)
2018/10/12 全球购物
为什么说Ruby是一种真正的面向对象程序设计语言
2012/10/30 面试题
军训感想500字
2014/02/20 职场文书
合作协议书怎么写
2014/04/18 职场文书
群众路线查摆问题整改措施
2014/10/10 职场文书
交通事故一次性赔偿协议书范本
2014/11/02 职场文书
销售开票员岗位职责
2015/04/15 职场文书
聘任通知书
2015/09/21 职场文书
高二化学教学反思
2016/02/22 职场文书
PyQt5 显示超清高分辨率图片的方法
2021/04/11 Python
Python中的np.argmin()和np.argmax()函数用法
2021/06/02 Python