Estou tentando criar um menu suspenso com o Vanilla JavaScript e não consigo descobrir a melhor maneira de adicionar uma classe de ativo ao menu suspenso clicado e, ao mesmo tempo, remover todas as outras classes ativas dos elementos irmãos.

até agora é isso que eu tenho, tanto quanto JS:

var _dropdowns = [].slice.call(document.getElementsByClassName('main-menu-li_dropdown'));

            _dropdowns.forEach(function(dropdowns) {
                dropdowns.addEventListener('click', function( event ){
                    event.preventDefault();
                    console.log(this !== event.target);
                    this.classList.toggle('active');
                });
            });

E aqui está minha marcação:

<nav id="main-nav">
    <ul>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
        <li class="main-menu-li_dropdown">
            <a href="">link</a>
            <ul class="sub-nav">
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
                <li><a href="">link</a></li>
            </ul>
        </li>
    </ul>
</nav>