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

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

<div class="btn-group-vertical">
    <button type="button" class="btn btn-default">按钮 1</button>
    <button type="button" class="btn btn-default">按钮 2</button>
    <div class="btn-group-vertical dropdown-toggle">
        <button type="button" class="btn btn-default dropitem" data-toggle="dropdown">
            下拉
        </button>
        <ul class="dropdown-menu">
            <li><a href="#">下拉链接 1</a></li>
            <li><a href="#">下拉链接 2</a></li>
        </ul>
    </div>
</div>

</body>
<script>
    $(document).ready(function () {
        $(".dropdown-toggle").mouseenter(function() {
	        $(this).addClass("mousein");
            if(!$(this).hasClass("open")){
			$(this).find(".dropitem").dropdown("toggle");
            }
        }).mouseleave(function () {
	        $(this).removeClass("mousein");
            setTimeout(()=>{
                if($(this).hasClass("open")&&!$(this).hasClass("mousein")){
					$(this).find(".dropitem").dropdown("toggle");
                }
            },10);
        });

        $(document).off('click.bs.dropdown.data-api');
        $(".dropitem").click(function (e) {
            $(this).dropdown("toggle");
        });
    })


</script>
</html>

关键是以下两点:

  • 事件会不断的在mouseout和mouseover之间跳转,因此绑定的时候绑定事件mouseenter和mouseleave。
  • 离开的时候设置一个timeout,然后再取消。
  • 因为toggle是来回切换,因此需要判定当前状态然后再决定是否要切换菜单状态。
发布了132 篇原创文章 · 获赞 77 · 访问量 12万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 精致技术 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览