js+bootstrap完美实现鼠标悬停下拉菜单

最新推荐文章于 2023-07-28 15:50:21 发布

Sailist

最新推荐文章于 2023-07-28 15:50:21 发布

阅读量1k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/sailist/article/details/103410068

版权

本文介绍了一种解决JavaScript和Bootstrap下拉菜单在鼠标悬停时因空隙导致消失的方法。通过绑定mouseenter和mouseleave事件，并在离开时使用setTimeout和clearTimeout来控制下拉菜单的显示，避免了mouseout导致的菜单意外关闭。文章提供了完整的页面代码示例。

摘要由CSDN通过智能技术生成

找了快一天没一个能用的…悬停很好设置，但是存在一个问题就是下拉菜单和按钮之间存在一个空隙，会导致鼠标移动过去的时候处于mouseout的状态而让下拉菜单消失，经过调试以下方法是比较完美的（完整页面代码）：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Bootstrap 实例 - 垂直的按钮组</title>
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body&