How to close div elements when a user click anywhere outside the browser and make the toggle on menu work

Question

Now, each element on the page closes when the user click anywhere outside the browser but the submenu does not collapse when the user click on the link. please can anyone help me with the code to see what i have done wrong.

here is a link of what i have done: https://jsfiddle.net/seqrj1kc/2/ I want menu to toggle when the user clicks on it as well.

<!-- 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

Close the window inside the onblur of window

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