Закрытие aria-hidden при клике вне дочернего елемента

Есть выпадающее меню, реализовано таким образом (один из пунктов меню):

<li>
<a role="button" id="menu_catalog" href="#mobile_catalog" aria-haspopup="true" aria-controls="mobile_catalog" aria-expanded="false">Родитель <i class="fas fa-chevron-down"></i></a>
<ul id="mobile_catalog" role="menu" aria-hidden="true" aria-labelledby="menu_catalog" class="ontop  drop-men">
        <ul class="hidden-phone" style="padding-left: 30px;margin-bottom: 0!important;">
            <li><a href="/url">Дочерний 1</a></li>
            <li><a href="/url">Дочерний 2</a></li>
            <li><a href="/url">Дочерний 3</a></li>
        </ul>    
    </ul>
</li>

И получается при клике на стрелку <i class="fas fa-chevron-down"></i> открывается и закрывается, как сделать чтобы закрывалось при клике ВНЕ <ul id="mobile_catalog">?

CSS

    ul#mobile_catalog li:last-child {
        padding-bottom: 0;
    }
    ul#mobile_catalog {
        column-count: 3;
        max-width: 1100px;
        overflow: visible;
    }
    #mobile_catalog li.closer {
        text-align: center;
        margin-bottom: 8px;
        padding: 12px 0;
        cursor: pointer;
    }
    ul#mobile_catalog li {
        margin: 0;
        padding: 0;
    }
    ul#mobile_catalog>li:last-child a {
        color: #fff;
        font-weight: 400;
        
    }
    ul#mobile_catalog>li:last-child {
        border: 0;
        background: #000;
        display: inline-block;
        padding: 5px 20px;
        float: right;
        margin-top: 30px;
    }
    ul#mobile_catalog {
        padding: 20px;
    }
    ul#mobile_catalog>li {
        border-left: 2px solid #ffd060;
        margin: 0;
        padding-left: 30px;
        margin-bottom: 20px!important;
        display: block;
        padding-top: 0;
        padding-bottom: 0;
    }
[aria-expanded=true] .fa-chevron-down:before { content: "\f077";}
#menu_catalog i { font-size: inherit; padding-left: 4px }
#mobile_catalog a { text-transform: none; font-size: 18px }
#mobile_catalog { height: 100%; background: #fff; margin: 0; padding: 16px; overflow: scroll }
#mobile_catalog li { list-style: none; margin-bottom: 1px; background: #f5f5f5; padding: 16px 0 16px 32px }
#mobile_catalog li.closer { text-align: center; margin-bottom: 8px; padding: 12px 0; cursor: pointer; }
#mobile_catalog li.closer i { font-size: 20px }

И обрабатывается это все дело вот этим js (наверное)

let expanders = document.querySelectorAll('[aria-haspopup]');
for (i=0; i<expanders.length;i++) {
  expanders[i].addEventListener('click',expand_generators(expanders[i])); 

}
let closers = document.querySelectorAll('.closer');
for (i=0; i<closers.length;i++) {
  closers[i].addEventListener('click',close_generators(closers[i])); 
}

Заранее спасибо за ответ.