Close css menu on click anywhere on screen

Hi,

I have this script to open a menuitem on click. And that works fine.

<ul class="top-nav">
             <!-- Actions -->
            <li class="top-nav__item">
                <div class="top-nav__item--icon">
                        <i class="fas fa-home"></i>
                </div>
               
                <div class="top-nav__item--link">
                    <a href="#">Actions</a>
                </div>

                <ul class="top-nav__sub">
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--icon">
                                <i class="fas fa-toolbox"></i>
                        </div>
                        <div class="top-nav__sub-item--link">
                            <a href="#">Print</a>
                        </div>
                    </li>
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--link">
                            <a href="#">E-mail</a>
                        </div>
                    </li>
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--link">
                            <a href="#">Download</a>
                        </div>
                    </li>
                </ul>    
            </li>

            <!-- Fast links -->
            <li class="top-nav__item">
                <div class="top-nav__item--icon">
                    <i class="fas fa-toolbox"></i>
                </div>
            
                <div class="top-nav__item--link">
                    <a href="#">Fast Lnks</a>
                </div>
            
                <ul class="top-nav__sub">
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--icon">
                            <i class="fas fa-toolbox"></i>
                        </div>
                        <div class="top-nav__sub-item--link">
                            <a href="#">News</a>
                        </div>
                    </li>
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--link">
                            <a href="#">Extras</a>
                        </div>
                    </li>
                    <li class="top-nav__sub-item">
                        <div class="top-nav__sub-item--link">
                            <a href="#">More stuff...</a>
                        </div>
                    </li>
                </ul>
            </li>
        </ul>

Select allOpen in new window

JS

  $('.top-nav__item').click(function () {
        var current_nav = $(this).find('.top-nav__sub');
        $('.top-nav__sub').not(current_nav).removeClass('top-nav__sub--open');
        current_nav.toggleClass('top-nav__sub--open');
    });

Select allOpen in new window

I now want to be able to close menu whenever I click somewhere else on the screen. I've tried this code but didn't succeed:

window.onclick = function (event) {
    if (!event.target.matches('.top-nav__item')) {
        var dropdowns = document.getElementsByClassName("top-nav__sub");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('top-nav__sub--open')) {
                openDropdown.classList.remove('top-nav__sub--open');
            }
        }
    }
}

Select allOpen in new window

I've started to test on this codepen if that's to any help:
CodePen

Thanks for help!
Peter