前端-点击其他区域隐藏下拉菜单

最新推荐文章于 2022-04-18 14:23:54 发布

孙硕SunShuo

最新推荐文章于 2022-04-18 14:23:54 发布

阅读量654

点赞数

分类专栏：前端文章标签： javascript 隐藏菜单前端

本文链接：https://blog.csdn.net/sunshuo1231/article/details/109580851

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自动隐藏菜单操作</title>

    <link rel="stylesheet" href="css/base.css">
    <style>
        .menu {
            height: 45px;
            background-color: skyblue;
        }

        .menu li {
            float: left;
            width: 100px;
            height: 100%;
            text-align: center;
            line-height: 45px;
            font-size: 16px;
            cursor: pointer;
        }

        .content {
            position: absolute;
            top: 45px;
            bottom: 0;
            left: 0;
            right: 0;
        }

        /* 子菜单样式 */
        #submenu {
            display: none;
            position: absolute;
            top: 45px;
            left: 288px;
            width: 120px;
            background-color: #FFF;
            z-index: 202011061730;
        }

        #submenu:before {
            content: "";
            position: relative;
            display: block;
            height: 12px;
            width: 3px;
            margin-top: -24px;
            margin-left: auto;
            margin-right: auto;
            border: 6px solid transparent;
            border-bottom-color: #FFF;
        }

        #submenu ul {
            background-color: #fff;
            border-radius: 4px;
            box-shadow: 0px 2px 5px 0px #ddd;
            margin: 0;
            padding: 10px 0px;
            max-height: 400px;
            overflow: auto;
        }

        #submenu ul li {
            height: 30px;
            padding: 0 8px;
            line-height: 30px;
            color: #070707;
        }

        #submenu ul li:hover {
            cursor: pointer;
            color: rgb(0, 188, 255);
        }
    </style>

    <script src="js/lib/jquery/jquery.3.js"></script>
    <script>
        $(document).ready(function(){
            // 绑定更多按钮事件
            $('.menu-more').click(function() {
                // 显示下级菜单
                $('#submenu').slideDown(200);
                // 绑定区域外点击隐藏事件
                addAutoHideSubMenuEvent();
            });

            /**
             *  绑定区域外点击隐藏事件
             */
            function addAutoHideSubMenuEvent() {
                /* 
                    直接绑定到document上，点击iframe区域不会隐藏菜单
                 */
                // $(document).bind('click.autosubmenu', function(event) {
                //     var $submenueArea = $('.submenu-target-area');
                //     var target = event.srcElement || event.target;
                //     // 菜单区域不绑定事件
                //     if($submenueArea.has(target).length > 0 || $submenueArea.is(target)) {
                //         return;
                //     }
                //     // 隐藏菜单
                //     $('#submenu').slideUp(200);
                //     // 解除绑定
                //     removeAutoHideSubMenuEvent();
                // });

                /* 获取所有窗口 */
                var frameWindows = getBrowerWindows();
                for(var i = 0 ; i < frameWindows.length; i++) {
                    try{ 
                        var frameWindow = frameWindows[i];
                        $(frameWindow.document).bind("click.autosubmenu", function(event){
                            var $submenueArea = $('.submenu-target-area');
                            var target = event.srcElement || event.target;
                            // 菜单区域不绑定事件
                            if($submenueArea.has(target).length >0 || $submenueArea.is(target)) {
                                return;
                            }
                            // 隐藏下级菜单
                            $('#submenu').slideUp(200);
                            // 移除自动绑定的事件
                            removeAutoHideSubMenuEvent();
                        });
                    } catch (e) {
                        // handle exception
                    }
                }
            }

            // 移除自动隐藏菜单事件
            function removeAutoHideSubMenuEvent() {
                // $(document).unbind("click.autosubmenu");
                var frameWindows = getBrowerWindows();
                for(var i = 0 ; i < frameWindows.length; i++) {
                    try{ 
                        var frameWindow = frameWindows[i];
                        $(frameWindow.document).unbind("click.autosubmenu");
                    } catch (e) {
                        // handle exception
                    }
                }
            }

            // 获取当前下边所有window
            function getBrowerWindows() {
                var windows = [];
                windows.push(window);
                // 获取frame
                var getFrames = function(domWin) {
                    if ($.isWindow(domWin) && domWin.frames.length > 0) {
                        var l = domWin.frames.length;
                        for ( var i = 0; i < l; i++) {
                            var isWindow = false;
                            try{
                                isWindow = $.isWindow(domWin.frames[i]);
                            }catch(e){
                                continue;
                            }
                            
                            if(isWindow){
                                windows.push(domWin.frames[i]);
                                getFrames(domWin.frames[i]);
                            }
                        }
                    }
                };
                getFrames(window);
                return windows;
            }

        });
    </script>
</head>
<body>
    <div class="menu">
        <ul>
            <li>菜单一</li>
            <li>菜单二</li>
            <li>菜单三</li>
            <li class="submenu-target-area menu-more">更多</li>
        </ul>
    </div>
    <div class="content">
        <iframe src="./04-sub-content01.html" frameborder="0" style="width: 100%; height: 100%"></iframe>
    </div>

    <div id="submenu" class="submenu-target-area">
        <ul>
            <li>菜单四</li>
            <li>菜单五</li>
            <li>菜单六</li>
        </ul>
    </div>
</body>
</html>

1.由于内容区使用了iframe，所以需要获取当前window和iframe中window对象，分别给document对象绑定上隐藏事件。
2.绑定事件和解绑事件用的bind(‘click.命名空间’)的方式，防止解除点击事件时误伤。
3.例子不能运行，只做参考。

孙硕SunShuo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端-点击其他区域隐藏下拉菜单

<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>自动隐藏菜单操作</title> <link rel="stylesheet" href="css/
复制链接

扫一扫