JavaScript

超轻量级php框架startmvc

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

更新时间:2020-04-23 18:20:01 作者:startmvc
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 鼠标悬停 鼠标悬停下拉列表