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中使用timer示例
May 08 Javascript
jQuery实现多按钮单击变色
Nov 27 Javascript
从零学习node.js之express入门(六)
Feb 25 Javascript
jquery表单验证实例仿Toast提示效果
Mar 03 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
bootstrap手风琴折叠示例代码分享
May 22 Javascript
AngularJS实现controller控制器间共享数据的方法示例
Oct 30 Javascript
ReactNative 之FlatList使用及踩坑封装总结
Nov 29 Javascript
JavaScript之实现一个简单的Vue示例
Jan 17 Javascript
解决vue打包后刷新页面报错:Unexpected token
Aug 27 Javascript
在weex中愉快的使用scss的方法步骤
Jan 02 Javascript
JS数组降维的实现Array.prototype.concat.apply([], arr)
Apr 28 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
phpmyadmin中禁止外网使用的方法
2014/11/04 PHP
Packer 3.0 JS压缩及混淆工具 下载
2007/05/03 Javascript
Extjs学习过程中新手容易碰到的低级错误积累
2010/02/11 Javascript
js 页面元素的几个用法总结
2013/11/18 Javascript
JavaScript简单实现鼠标拖动选择功能
2014/03/06 Javascript
json的定义、标准格式及json字符串检验
2014/05/11 Javascript
jQuery中hide()方法用法实例
2014/12/24 Javascript
JavaScript实现的encode64加密算法实例分析
2015/04/15 Javascript
jQuery中toggle()函数的使用实例
2015/04/17 Javascript
分享JavaScript与Java中MD5使用两个例子
2015/12/23 Javascript
javascript实现在网页中运行本地程序的方法
2016/02/03 Javascript
JQuery fileupload插件实现文件上传功能
2016/03/18 Javascript
AngularJS入门教程之AngularJS模型
2016/04/18 Javascript
jquery+html仿翻页相册功能
2016/12/20 Javascript
微信小程序 图片边框解决方法
2017/01/16 Javascript
javascript中递归的两种写法
2017/01/17 Javascript
详解基于angular路由的requireJs按需加载js
2017/01/20 Javascript
浅谈angular2子组件的事件传递(任意组件事件传递)
2018/09/30 Javascript
微信小程序实现顶部下拉菜单栏
2018/11/04 Javascript
关于layui的下拉搜索框异步加载数据的解决方法
2019/09/28 Javascript
对vue中的事件穿透与禁止穿透实例详解
2019/10/28 Javascript
vue.js使用v-model实现父子组件间的双向通信示例
2020/02/05 Javascript
python 合并文件的具体实例
2013/08/08 Python
跟老齐学Python之正规地说一句话
2014/09/28 Python
有关Python的22个编程技巧
2018/08/29 Python
对python当中不在本路径的py文件的引用详解
2018/12/15 Python
python引用(import)某个模块提示没找到对应模块的解决方法
2019/01/19 Python
pycharm中显示CSS提示的知识点总结
2019/07/29 Python
Python的几种主动结束程序方式
2019/11/22 Python
python的range和linspace使用详解
2019/11/27 Python
基于pycharm实现批量修改变量名
2020/06/02 Python
基于python判断字符串括号是否闭合{}[]()
2020/09/21 Python
详解matplotlib中pyplot和面向对象两种绘图模式之间的关系
2021/01/22 Python
苏格兰销售女装、男装和童装的连锁店:M&Co
2018/03/16 全球购物
生产主管岗位职责
2013/11/10 职场文书
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技