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 相关文章推荐
基于jquery的时间段实现代码
Aug 02 Javascript
使用js实现数据格式化
Dec 03 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
Mar 04 Javascript
浅谈window对象的scrollBy()方法
Jul 15 Javascript
分享我对JS插件开发的一些感想和心得
Feb 04 Javascript
js实现背景图自适应窗口大小
Jan 10 Javascript
基于angular-utils-ui-breadcrumbs使用心得(分享)
Nov 03 Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 Javascript
基于mpvue搭建微信小程序项目框架的教程详解
Apr 10 Javascript
JS立即执行的匿名函数用法分析
Nov 04 Javascript
viewer.js实现图片预览功能
Jun 24 Javascript
vue组件的路由高亮问题解决方法
May 11 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 中include()与require()的对比
2006/10/09 PHP
写一段简单的PHP建立文件夹代码
2015/01/06 PHP
ThinkPHP静态缓存简单配置和使用方法详解
2016/03/23 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
JS学习之一个简易的日历控件
2010/03/24 Javascript
javascript如何使用bind指定接收者
2014/05/04 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
js实现兼容IE、Firefox的图片缩放代码
2015/12/08 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
jQuery插件HighCharts实现气泡图效果示例【附demo源码】
2017/03/13 Javascript
利用node.js如何搭建一个简易的即时响应服务器
2017/05/28 Javascript
node文件上传功能简易实现代码
2017/06/16 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
ActiveX控件的使用-js实现打印超市小票功能代码详解
2017/11/22 Javascript
React教程之封装一个Portal可复用组件的方法
2018/01/02 Javascript
详解webpack-dev-server使用方法
2018/09/14 Javascript
详解如何使用koa实现socket.io官网的例子
2018/11/04 Javascript
AutoJs实现刷宝短视频的思路详解
2020/05/22 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
2020/11/11 Javascript
element-ui中el-upload多文件一次性上传的实现
2020/12/02 Javascript
[36:33]Ti4 循环赛第四日 附加赛NEWBEE vs Mouz
2014/07/13 DOTA
[02:02]特效爆炸!DOTA2珍宝之瓶待你开启
2018/08/21 DOTA
更改Python命令行交互提示符的方法
2015/01/14 Python
Python实现脚本锁功能(同时只能执行一个脚本)
2017/05/10 Python
Django 限制用户访问频率的中间件的实现
2018/08/23 Python
Python解析json时提示“string indices must be integers”问题解决方法
2019/07/31 Python
python 从list中随机取值的方法
2020/11/16 Python
服务员自我评价
2014/01/25 职场文书
渔夫的故事教学反思
2014/02/14 职场文书
产品推广策划方案
2014/05/10 职场文书
搞笑的获奖感言
2014/08/16 职场文书
2014各大专业毕业生自我评价
2014/09/17 职场文书
个人反四风对照检查材料思想汇报
2014/09/23 职场文书
推广普通话宣传标语口号
2015/12/26 职场文书
为什么mysql字段要使用NOT NULL
2021/05/13 MySQL
Python机器学习实战之k-近邻算法的实现
2021/11/27 Python