如何在Bootstrap中的悬停上打开下拉菜单

在Bootstrap中，可以通过使用下拉菜单组件和JavaScript来实现悬停时打开下拉菜单的效果。下面是一个示例代码片段，演示了如何实现此功能。

HTML 结构

首先，在HTML代码中添加一个包含下拉菜单的按钮和下拉菜单列表的容器。

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">菜单项1</a>
    <a class="dropdown-item" href="#">菜单项2</a>
    <a class="dropdown-item" href="#">菜单项3</a>
  </div>
</div>

在这个示例中，使用了 .dropdown 类来创建一个下拉菜单组件，并且给按钮添加了 .dropdown-toggle 类。

引入 Bootstrap 和 jQuery

接下来，在你的项目中引入 Bootstrap 和 jQuery 的库文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/js/bootstrap.min.js"></script>

这样可以确保页面中的 Bootstrap 样式和脚本可以正常工作。

JavaScript 代码

添加以下 JavaScript 代码，以在悬停时打开下拉菜单：

$(document).ready(function(){
  $('.dropdown').hover(function(){
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function(){
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });
});

这段代码使用了 jQuery 的 .hover() 方法，当鼠标悬停在 .dropdown 元素上时，会触发第一个函数，显示下拉菜单；当鼠标离开时，会触发第二个函数，隐藏下拉菜单。

完整代码

下面是整个示例的完整代码片段：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/js/bootstrap.min.js"></script>

<div class="dropdown">
  <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">下拉菜单</button>
  <div class="dropdown-menu">
    <a class="dropdown-item" href="#">菜单项1</a>
    <a class="dropdown-item" href="#">菜单项2</a>
    <a class="dropdown-item" href="#">菜单项3</a>
  </div>
</div>

<script>
$(document).ready(function(){
  $('.dropdown').hover(function(){
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
  }, function(){
    $(this).find('.dropdown-menu').stop(true, true).delay(200).fadeOut(500);
  });
});
</script>

以上就是在 Bootstrap 中如何实现悬停时打开下拉菜单的介绍。通过使用下拉菜单组件和JavaScript，可以方便地为你的网站或应用程序添加这个功能。