Bootstrap下拉菜单更改为悬停(hover)触发的方法

发布时间：2020-10-24 12:20:26 阅读：170 作者：lyn0130 栏目：web开发

开发者测试专用服务器限时活动，0元免费领，库存有限，领完即止！点击查看>>

Bootstrap下拉菜单默认需要通过点击，才可以打开，在管理系统的开发过程中，使用悬停代替点击能减少一步操作，更人性化。下面是实现方式：

<!DOCTYPE html>
<html>
  <head>
    <link href="http://cdn.bootcss.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap/3.3.5/js/bootstrap.js"></script>
    <script src="http://cdn.bootcss.com/bootstrap-hover-dropdown/2.0.10/bootstrap-hover-dropdown.min.js"></script>
  </head>
  <body>
    <div class="dropdown">
  <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" 
   data-toggle="dropdown" data-hover="dropdown">
   主题
   <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu" aria-labelledby="dropdownMenu1">
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">Java</a>
   </li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">数据挖掘</a>
   </li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">
      数据通信/网络
     </a>
   </li>
   <li role="presentation" class="divider"></li>
   <li role="presentation">
     <a role="menuitem" tabindex="-1" href="#">分离的链接</a>
   </li>
  </ul>
</div>
  </body>
</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持亿速云。

亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

向AI问一下细节

Bootstrap下拉菜单更改为悬停(hover)触发的方法

猜你喜欢

最新资讯

相关推荐

开发者交流群：

相关标签