[Tipylja]

Здравствуйте. У меня есть меню с такой структурой:

<nav class="middleMenu layout__middleMenu">
    <a href="#" class="middleMenu__control">Каталог товаров</a>
    <ul class="middleMenu__block middleMenu__block--hidden">
        <li class="middleMenu__item">
            <a href="#" class="middleMenu__link">Двери</a>                
        </li>
        <li class="middleMenu__item">
            <a href="#" class="middleMenu__link">Карнизы</a>                
        </li>
    </ul>
</nav>

Меню выпадает при клике по "middleMenu__control", при клике у ul с классом middleMenu__block, удаляем класс middleMenu__block--hidden, тем самым в css уберется правило display: hidden, при повторном клике, меню "сворачивается", то есть возвращаем класс middleMenu__block--hidden.
Вот js который я для этого написал:

window.addEventListener('load', function (e) {
    let control = document.querySelector('.middleMenu__control');
    let menuBlock = document.querySelector('.middleMenu__block');
    
    control.addEventListener('click', function (e) {
        e.preventDefault();

        if(menuBlock.classList.contains("middleMenu__block--hidden")){
            menuBlock.classList.remove("middleMenu__block--hidden")

        }else {
            menuBlock.classList.add("middleMenu__block--hidden");

        }
    })

});

Но, в таком случае меню сворачивается только если кликнуть по middleMenu__control . Но по смыслу, оно должно "сворачиваться" и если кликнуть просто вне самого меню. Я добавляю вот такой код

document.addEventListener('click', function(e){
        if(control !== e.target){
            menuBlock.classList.add("middleMenu__block--hidden");
        }
    }, true);

То есть, если клик происходит не на элементе control то меню "закрывается" и это работает. Но я думаю, что возможно это можно сделать как-то элегантнее что ли, то есть не знаю на сколько целесообразно для такой задачи отслеживать клик на document. И второй момент - по сути я отслеживаю, что клик произошел не на control и тогда меню "сворачиваю", но посути при клике на control его тоже нужно свернуть(так и работает), какой-то код противоречивый получается. Не знаю, мало опыта, возможно это и нормально, все писал сам, может так и нужно делать. Подскажите пожалуйста