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

2019/6/27 21:09:36

编程Tag： bootstrap 下拉列表鼠标悬停

本文主要是介绍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实现鼠标悬停下拉列表功能，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对找一找教程网网站的支持！

这篇关于BootStrap实现鼠标悬停下拉列表功能的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

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

相关编程文章