یک نمونه Dropdown

سلام
دوستان بلاخره بعد از کلی فکر تونستم یه dropdown بنویسم که عملکرد درستی داشته باشه. این dropdown قراره چندین بار در یک صفحه استفاده بشه و نباید هیچ وقت دو تا dropdown با هم دیگه باز باشن و وقتی یکیشون باز می شه دیگری باید بسته بشه. این از قسمت html

<div class="js-dropdown">
    <button class="dropdown-button">کلیک</button>
    <ul class="dropdown-content" >
        <li class="dropdown-content-item">111</li>
        <li class="dropdown-content-item">222</li>
        <li class="dropdown-content-item">333</li>
    </ul>
</div>

این بخش از کد برای باز و بسته شدن dropdown هست وقتی که روش کلیک می کنیم و همینطور وقتی روی dropdown دیگه ای کلیک می کنیم بقیه dropdown ها بسته شوند

$(document).ready(function(){
    $(".dropdown-button").on('click',function (e) {
        var dropdown = $(this).closest(".js-dropdown");
        if(dropdown.find('.dropdown-content').hasClass('is-visible')){
            $('.dropdown-content').removeClass('is-visible');
        }else{
            $('.dropdown-content').removeClass('is-visible');
            dropdown.find('.dropdown-content').addClass('is-visible');
        }
    })
});

این بخش هم برای وقتی که روی هرجای صفحه به جز dropdown ها کلیک می کنیم اگه dropdown ی باز بود بسته بشه.

window.onclick = function(event) {
    if (!event.target.matches('.dropdown-button')) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
            var openDropdown = dropdowns[i];
            if (openDropdown.classList.contains('is-visible')) {
                openDropdown.classList.remove('is-visible');
            }
        }
    }
}

به نظرتون منطق کد نویسیم درسته ؟ خودم احساس می کنم خیلی شلختس و روش های بهینه تر و بهتری براش هست. شما چی فکر می کنید؟
@Alimotreb
@ali.bayat