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 相关文章推荐
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
动态加载js和css(外部文件)
Apr 17 Javascript
jQuery+HTML5实现手机摇一摇换衣特效
Jun 05 Javascript
浅析Node.js中使用依赖注入的相关问题及解决方法
Jun 24 Javascript
jQuery插件EasyUI校验规则 validatebox验证框
Nov 29 Javascript
JavaScript通过HTML的class来获取HTML元素的方法总结
May 24 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
Mar 30 Javascript
Cookies 和 Session的详解及区别
Apr 21 Javascript
日期时间范围选择插件:daterangepicker使用总结(必看篇)
Sep 14 Javascript
实例分析Array.from(arr)与[...arr]到底有何不同
Apr 09 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
Nov 19 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
Jul 27 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实现设计模式中的单例模式详解
2014/10/11 PHP
PHP5.3以上版本安装ZendOptimizer扩展
2015/03/27 PHP
完美解决php 导出excle的.csv格式的数据时乱码问题
2017/02/18 PHP
javascript中字符串拼接需注意的问题
2010/07/13 Javascript
在JavaScript中获取请求的URL参数
2010/12/22 Javascript
在Firefox下js select标签点击无法弹出
2014/03/06 Javascript
原生Ajax 和jQuery Ajax的区别示例分析
2014/12/17 Javascript
Jquery实现图片预加载与延时加载的方法
2014/12/22 Javascript
jQuery实现下滑菜单导航效果代码
2015/08/25 Javascript
JavaScript转换与解析JSON方法实例详解
2015/11/24 Javascript
jQuery给元素添加样式的方法详解
2015/12/30 Javascript
JS、jQuery中select的用法详解
2016/04/21 Javascript
如何判断Javascript对象是否存在的简单实例
2016/05/18 Javascript
归纳下js面向对象的几种常见写法总结
2016/08/24 Javascript
Javascript中关于Array.filter()的妙用详解
2016/12/04 Javascript
js实现简易聊天对话框
2017/08/17 Javascript
React 组件转 Vue 组件的命令写法
2018/02/28 Javascript
深入理解js 中async 函数的含义和用法
2018/05/13 Javascript
Vue多系统切换实现方案
2018/06/05 Javascript
如何为vue的项目添加单元测试
2018/12/19 Javascript
Python基于opencv的图像压缩算法实例分析
2018/05/03 Python
PyQt5 pyqt多线程操作入门
2018/05/05 Python
Python常用的json标准库
2019/02/19 Python
详解pandas数据合并与重塑(pd.concat篇)
2019/07/09 Python
Django 框架模型操作入门教程
2019/11/05 Python
opencv+python实现均值滤波
2020/02/19 Python
如何在scrapy中捕获并处理各种异常
2020/09/28 Python
中药专业自荐信范文
2014/03/18 职场文书
幼儿园中班下学期评语
2014/04/18 职场文书
国贸专业毕业求职信
2014/06/11 职场文书
2015年乡镇残联工作总结
2015/05/13 职场文书
交通事故调解协议书
2015/05/20 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
高中家长意见怎么写
2015/06/03 职场文书
25句企业管理语录:助你迅速打开思路,句句经典!
2020/01/14 职场文书
python基础之文件操作
2021/10/24 Python