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 相关文章推荐
jBox 2.3基于jquery的最新多功能对话框插件 常见使用问题解答
Nov 10 Javascript
jquery图片放大镜功能的实例代码
Mar 26 Javascript
jquery ajaxSubmit 异步提交的简单实现
Feb 28 Javascript
浅析jquery的js图表组件highcharts
Mar 06 Javascript
ajaxFileUpload.js插件支持多文件上传的方法
Sep 02 Javascript
JQuery包裹DOM节点的方法
Jun 11 Javascript
基于Flowplayer打造一款免费的WEB视频播放器附源码
Sep 06 Javascript
javascript+HTML5自定义元素播放焦点图动画
Feb 21 Javascript
bootstrap confirmation按钮提示组件使用详解
Aug 22 Javascript
微信小程序实现获取自己所处位置的经纬度坐标功能示例
Nov 30 Javascript
Angular resolve基础用法详解
Oct 03 Javascript
Electron vue的使用教程图文详解
Jul 05 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
调频问题解答
2021/03/01 无线电
一个程序下载的管理程序(二)
2006/10/09 PHP
三个类概括PHP的五种设计模式
2012/09/05 PHP
php中explode与split的区别介绍
2012/10/03 PHP
修复ShopNC使用QQ 互联时提示100010 错误
2015/11/08 PHP
基于PHP代码实现中奖概率算法可用于刮刮卡、大转盘等抽奖算法
2015/12/20 PHP
利用PHP生成静态html页面的原理
2016/09/30 PHP
thinkPHP5框架设置404、403等http状态页面的方法
2018/06/05 PHP
jquery图片播放浏览插件prettyPhoto使用详解
2014/12/19 Javascript
JScript中的条件注释详解
2015/04/24 Javascript
javascript之with的使用(阿里云、淘宝使用代码分析)
2016/10/11 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
2016/12/02 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
原生JS上传大文件显示进度条 php上传文件代码
2020/03/27 Javascript
bootstrap响应式导航条模板使用详解(含下拉菜单,弹出框)
2017/11/17 Javascript
利用vscode调试编译后的js代码详解
2018/05/14 Javascript
vue实现word,pdf文件的导出功能
2018/07/31 Javascript
Vue中的vue-resource示例详解
2018/11/02 Javascript
JS集合set类的实现与使用方法示例
2019/02/01 Javascript
对layui初始化列表的CheckBox属性详解
2019/09/13 Javascript
nodejs使用Sequelize框架操作数据库的实现
2020/10/21 NodeJs
NodeJS配置CORS实现过程详解
2020/12/02 NodeJs
tornado框架blog模块分析与使用
2013/11/21 Python
Python判断直线和矩形是否相交的方法
2015/07/14 Python
Python判断文本中消息重复次数的方法
2016/04/27 Python
python邮件发送smtplib使用详解
2020/06/16 Python
Python中循环后使用list.append()数据被覆盖问题的解决
2018/07/01 Python
Python绘制正余弦函数图像的方法
2018/08/28 Python
PyQt 实现使窗口中的元素跟随窗口大小的变化而变化
2019/06/18 Python
django框架事务处理小结【ORM 事务及raw sql,customize sql 事务处理】
2019/06/27 Python
Django中的用户身份验证示例详解
2019/08/07 Python
python二进制读写及特殊码同步实现详解
2019/10/11 Python
python实现数据结构中双向循环链表操作的示例
2020/10/09 Python
自我鉴定怎么写
2014/01/12 职场文书
工作报告范文
2019/06/20 职场文书
Ajax实现三级联动效果
2021/10/05 Javascript