当用户单击浏览器之外的任何地方并使菜单切换生效时，如何关闭div元素

Question

现在，当用户单击浏览器之外的任何位置时，页面上的每个元素都会关闭，但是当用户单击链接时，子菜单不会折叠。 请任何人可以帮助我的代码，看看我做错了什么。

这是我所做的操作的链接： https : //jsfiddle.net/seqrj1kc/2/我也希望菜单在用户单击时进行切换。

<!-- html code -->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<header>
 <span id="icon-menu"><i class="fa fa-navicon"></i></span>
 <!-- keep me hidden untill a click -->
            <div class="menu-wrap">
                <div class="our-menu-large" id="large-menu" style="display: none;">
                    <span class="btn-close" id="times-btn">&times;</span>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">about</a></li>
                        <li><a href="#">services</a></li>
                        <li><a href="#">project</a></li>
                        <li><a href="#">contact</a></li>
                    </ul>
                </div>
            </div>
            <!-- end keep me hidden untill a click -->
  <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#" class="submenu-btn">About</a>
                            <ul class="submenu" style="display: none;">
                                <li><a href="#">Web Dev</a></li>
                                <li><a href="#">Java</a></li>
                                <li><a href="#">dot NET</a></li>
                            </ul>
                        </li>
                        <li><a href="#" class="submenu-btn">Courses</a>
                            <ul class="submenu" style="display: none;">
                                <li><a href="#">HTML</a></li>
                                <li><a href="#">CSS</a></li>
                                <li><a href="#">JAVASCRIPT</a></li>
                            </ul>
                        </li>
                        <li><a href="#">Contact</li>
                    </ul>
                </nav>
</header>
<!-- css code -->
nav > ul > li {
            display: inline;
            width: 109px;
            float: left;
            position: relative;
        }
        .submenu {
            background: #f5f5f5;
            padding: 10px;
            position: absolute;
            top: 37px;
        }
        .submenu li {
            list-style: none;
        }
    .our-menu-large {
            background: rgb(0,0,0);
            height: 100%;
            float: left;
            padding: 40px;
            position: absolute;
            top: 0px;
            left: 0px;
            z-index: 1000;
            color: #fff;
        }
        .our-menu-large ul li a {
            color: #fff;
        }
        .btn-close {
            color: #fff;
            position: relative;
            top: -26px;
            left: 66px;
            cursor: pointer;
            font-size: 14px;
        }
        #icon-menu {
            cursor: pointer;
        }
        <!-- javascript code -->
        var submenuBtn = document.getElementsByClassName("submenu-btn");
//loop through the buttons 
for (var i = 0; i < submenuBtn.length; i++) {
    submenuBtn[i].addEventListener("click", function() {
        var submenuContent = this.nextElementSibling;
        if (submenuContent.style.display === "none") {
            submenuContent.style.display = "block";
        } else {
            submenuContent.style.display = "none";
        }
    });
        window.addEventListener('click', e => {
        submenuContent = document.getElementsByClassName("submenu");
            for (var i = 0; i < submenuContent.length; i++) {
                // submenuContent[i];
                if (e.target != submenuContent && e.target.parentNode != submenuContent) {
                    submenuContent.style.display = 'none';
                }
            } 
        });
}

/* so make the large menu show on click */
    var menuButton = document.getElementById("icon-menu");
    var menuContent = document.getElementById("large-menu");
    var closeBtnMenu = document.getElementById("times-btn");

    menuButton.addEventListener("click", function() {
        if (menuContent.style.display === "none") {
            menuContent.style.display = "block";
        } else {
            menuContent.style.display = "none";
        }
    });

    closeBtnMenu.addEventListener("click", function() {
        menuContent.style.display = "none";
    });


  window.addEventListener("mouseup", function(event) {
    let subMenu = document.querySelectorAll(".submenu");
        for (let i = 0; i < subMenu.length; i++) {
            if(event.target != subMenu[i] && event.target.parentNode != subMenu[i]) {
                subMenu[i].style.display = "none";
            } else {
                submenu[i].style.display = "block";
            }
        }

    var menuContent = document.getElementById("large-menu"); 
    if(event.target != menuContent && event.target.parentNode != menuContent) {
                menuContent.style.display = "none";
            } else {
                menuContent.style.display = "block";
            }
});

Answer 1

window.onblur = function () {
    // use has quit the window
};

Answer 2

关闭内窗口onblur的window

window.onblur = function () {
    window.close();
};