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

最新推荐文章于 2022-10-27 17:53:42 发布

原创

最新推荐文章于 2022-10-27 17:53:42 发布 · 1.1k 阅读

4 ·

CC 4.0 BY-SA版权

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

找了快一天没一个能用的…悬停很好设置，但是存在一个问题就是下拉菜单和按钮之间存在一个空隙，会导致鼠标移动过去的时候处于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>

最低0.47元/天解锁文章