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 相关文章推荐
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
javascript中onmouse事件在div中失效问题的解决方法
Jan 09 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
基于bootstrap3和jquery的分页插件
Jul 31 Javascript
基于javascript实现简单的抽奖系统
Apr 15 Javascript
vue.js中过滤器的使用教程
Jun 08 Javascript
javascript兼容性(实例讲解)
Aug 15 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
VUE实现移动端列表筛选功能
Aug 23 Javascript
Vue中的循环及修改差值表达式的方法
Aug 29 Javascript
Vue路由守卫之路由独享守卫
Sep 25 Javascript
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转
Nov 25 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中开发XML应用程序之基础篇 添加节点 删除节点 查询节点 查询节
2010/07/09 PHP
php天翼开放平台短信发送接口实现方法
2014/12/22 PHP
如何使用纯PHP实现定时器任务(Timer)
2015/07/31 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
PHP PDO操作MySQL基础教程
2017/06/05 PHP
PHP的mysqli_set_charset()函数讲解
2019/01/23 PHP
一实用的实现table排序的Javascript类库
2007/09/12 Javascript
非常漂亮的JS代码经典广告
2007/10/21 Javascript
javascript中callee与caller的用法和应用场景
2010/12/08 Javascript
Javascript实现动态菜单添加的实例代码
2013/07/05 Javascript
js实现感应鼠标图片透明度变化的方法
2015/02/20 Javascript
javascript三元运算符用法实例
2015/04/16 Javascript
javascript url几种编码方式详解
2016/06/06 Javascript
JavaScript 最佳实践:帮你提升代码质量
2016/12/03 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
Python使用Scrapy保存控制台信息到文本解析
2017/12/27 Python
基于python代码实现简易滤除数字的方法
2018/07/17 Python
Python线程池模块ThreadPoolExecutor用法分析
2018/12/28 Python
Python中asyncio模块的深入讲解
2019/06/10 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
Python 数据的累加与统计的示例代码
2020/08/03 Python
html5将图片转换成base64的实例代码
2016/09/21 HTML / CSS
Oakley官网:运动太阳镜、雪镜和服装
2016/09/30 全球购物
美国在线面料商店:Online Fabric Store
2018/07/26 全球购物
澳大利亚足球鞋和服装购物网站:Ultra Football
2018/10/11 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
Andrew Marc官网:设计师外套的领先制造商
2019/10/30 全球购物
Douglas意大利官网:购买香水和化妆品
2020/05/27 全球购物
销售实习自我鉴定
2013/12/07 职场文书
应付会计岗位职责
2013/12/12 职场文书
企业安全生产承诺书
2014/05/22 职场文书
优秀工会工作者事迹材料
2014/06/02 职场文书
大学新生军训自我鉴定范文
2014/09/13 职场文书
个人批评与自我批评范文
2014/10/17 职场文书
企业务虚会发言材料
2014/10/20 职场文书