编程 Javascript

BootStrap实现鼠标悬停下拉列表功能

Posted in Javascript onFebruary 17, 2017

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实现鼠标悬停下拉列表功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持！

BootStrap实现鼠标悬停下拉列表功能

- Author -

weixin_37510612

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

一个tab标签切换效果代码

Mar 27 Javascript

js,jQuery 排序的实现代码,网页标签排序的实现,标签排序

Apr 27 Javascript

如何在指定的地方插入html内容和文本内容

Dec 23 Javascript

javascript使用定时函数实现跳转到某个页面

Dec 25 Javascript

js弹出div并显示遮罩层

Feb 12 Javascript

JQuery.get提交页面不跳转的解决方法

Jan 13 Javascript

JS实现跟随鼠标的链接文字提示框效果

Aug 06 Javascript

关于数据与后端进行交流匹配(点亮星星)

Aug 03 Javascript

JS实现table表格固定表头且表头随横向滚动而滚动

Oct 26 Javascript

亲自动手实现vue日历控件

Jun 26 Javascript

详解JavaScript匿名函数和闭包

Jul 10 Javascript

vue内置组件keep-alive事件动态缓存实例

Oct 30 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