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 相关文章推荐
javascript下给元素添加事件的方法与代码
Aug 13 Javascript
基于javascipt-dom编程 table对象的使用
Apr 22 Javascript
Javascript 命名空间模式
Nov 01 Javascript
JS基于VML技术实现的五角星礼花效果代码
Oct 26 Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 Javascript
更靠谱的H5横竖屏检测方法(js代码)
Sep 13 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
基于wordpress的ajax写法详解
Jan 02 Javascript
详解plotly.js 绘图库入门使用教程
Feb 23 Javascript
解决element-ui里的下拉多选框 el-select 时,默认值不可删除问题
Aug 14 Javascript
webpack4从0搭建组件库的实现
Nov 29 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
自动跳转中英文页面
2006/10/09 PHP
对text数据类型不支持代码页转换 从: 1252 到: 936
2011/04/23 PHP
PHP常用开发函数解析之数组篇[未完结]
2012/07/30 PHP
在yii中新增一个用户验证的方法详解
2013/06/20 PHP
PHP中mysql_field_type()函数用法
2014/11/24 PHP
php解决约瑟夫环算法实例分析
2019/09/30 PHP
在laravel框架中使用model层的方法
2019/10/08 PHP
javascript 动态添加事件代码
2008/11/30 Javascript
无闪烁更新网页内容JS实现
2013/12/19 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
js限制文本框只能输入中文的方法
2015/08/11 Javascript
JavaScript实现的经典文件树菜单效果
2015/09/08 Javascript
vue.js中$watch的用法示例
2016/10/04 Javascript
Vue filter介绍及详细使用
2018/04/04 Javascript
vue-cli 默认路由再子路由选中下的选中状态问题及解决代码
2018/09/06 Javascript
jquery-ui 进度条功能示例【测试可用】
2019/07/25 jQuery
jQuery实现的解析本地 XML 文档操作示例
2020/04/30 jQuery
纯JS实现五子棋游戏
2020/05/28 Javascript
python线程锁(thread)学习示例
2013/12/04 Python
python线程、进程和协程详解
2016/07/19 Python
django模型层(model)进行建表、查询与删除的基础教程
2017/11/21 Python
Python3实现发送QQ邮件功能(附件)
2020/12/23 Python
对python append 与浅拷贝的实例讲解
2018/05/04 Python
Python 查看list中是否含有某元素的方法
2018/06/27 Python
python使用正则表达式来获取文件名的前缀方法
2018/10/21 Python
Python读取配置文件(config.ini)以及写入配置文件
2020/04/08 Python
Python selenium使用autoIT上传附件过程详解
2020/05/26 Python
python基于opencv实现人脸识别
2021/01/04 Python
美国名牌太阳镜折扣网站:Eyedictive
2017/05/15 全球购物
Marc O’Polo俄罗斯官方在线商店:德国高端时尚品牌
2019/12/26 全球购物
土耳其新趋势女装购物网站:Addax
2020/01/07 全球购物
《挑山工》的教学反思
2014/02/16 职场文书
社区居务公开实施方案
2014/03/27 职场文书
户外活动总结
2015/02/04 职场文书
安全承诺书格式范本
2015/04/28 职场文书
违反纪律检讨书范文
2015/05/07 职场文书