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 相关文章推荐
如何让DIV可编辑、可拖动示例代码
Sep 18 Javascript
jquery实现pager控件示例
Apr 09 Javascript
JavaScript拆分字符串时产生空字符的解决方案
Sep 26 Javascript
14 个折磨人的 JavaScript 面试题
Aug 08 Javascript
清除浏览器缓存的几种方法总结(必看)
Dec 09 Javascript
JavaScript Uploadify文件上传实例
Feb 28 Javascript
JSON与js对象序列化实例详解
Mar 16 Javascript
JavaScript中的遍历详解(多种遍历)
Apr 07 Javascript
详解Vue-cli代理解决跨域问题
Sep 27 Javascript
基于Vue实现关键词实时搜索高亮显示关键词
Jul 21 Javascript
小程序扫描普通链接二维码跳转小程序指定界面方法
May 07 Javascript
vue中activated的用法
Jan 03 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中HTML标签过滤技巧
2014/01/07 PHP
php类常量用法实例分析
2015/07/09 PHP
PHP Cookie学习笔记
2016/08/23 PHP
php安装扩展mysqli的实现步骤及报错解决办法
2017/09/23 PHP
利用PHP内置SERVER开启web服务(本地开发使用)
2021/03/09 PHP
js 页面输出值
2008/11/30 Javascript
使用JQuery进行跨域请求
2010/01/25 Javascript
HTML上传控件取消选择
2013/03/06 Javascript
深入理解Javascript中的循环优化
2013/11/09 Javascript
基于jQuery通过jQuery.form.js插件使用ajax提交form表单
2015/08/17 Javascript
JavaScript中的各种操作符使用总结
2016/05/26 Javascript
js实现页面a向页面b传参的方法
2016/05/29 Javascript
JavaScript数组的定义及数字操作技巧
2016/06/06 Javascript
Vue2.0 vue-source jsonp 跨域请求
2017/08/04 Javascript
vue-router的钩子函数用法实例分析
2019/10/26 Javascript
Webpack设置环境变量的一些误区详解
2019/12/19 Javascript
Python中多线程的创建及基本调用方法
2016/07/08 Python
Python使用flask框架操作sqlite3的两种方式
2018/01/31 Python
python爬虫 使用真实浏览器打开网页的两种方法总结
2018/04/21 Python
python 读写excel文件操作示例【附源码下载】
2019/06/19 Python
感知器基础原理及python实现过程详解
2019/09/30 Python
Django项目中使用JWT的实现代码
2019/11/04 Python
PyTorch实现AlexNet示例
2020/01/14 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
瑞贝卡·明可弗包包官网:Rebecca Minkoff
2016/07/21 全球购物
Max&Co官网:意大利年轻女性时尚品牌
2017/05/16 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
Timberland法国官网:购买靴子、鞋子、衣服、夹克和配饰
2019/11/30 全球购物
将一个数的从第5位开始的7个数取出,其余位置0
2016/05/26 面试题
android面试问题与答案
2016/12/27 面试题
审计局2014法制宣传日活动总结
2014/11/01 职场文书
2014矛盾纠纷排查调处工作总结
2014/12/09 职场文书
大学生旷课检讨书1000字
2015/02/19 职场文书
父亲节寄语大全
2015/02/27 职场文书
小学安全教育主题班会
2015/08/12 职场文书
《分数乘法》教学反思
2016/02/24 职场文书