可折叠的下拉菜单

Question

我有下拉列表，其中有些下拉列表中有一个“归档”列表。下面的代码是JS，它允许我打开和关闭主下拉菜单，但仅允许我在单击“归档”然后关闭主（父）下拉列表之后打开和关闭“归档”。

    let coll = document.getElementsByClassName("collapsible");
    let i;

    for (i = 0; i < coll.length; i++) {
        coll[i].addEventListener("click", function() {
            this.classList.toggle("active");
            let content = this.nextElementSibling;
            if (content.style.maxHeight){
                content.style.maxHeight = null;
            } else {
                content.style.maxHeight = content.scrollHeight + "px";
            }
        });
    }

    let coll2 = document.getElementsByClassName("collapsible2");
    let a;

    for (a = 0; a < coll2.length; a++) {
        coll2[a].addEventListener("click", function() {
            this.classList.toggle("active");
            let content2 = this.nextElementSibling;
            if (content2.style.maxHeight){
                content2.style.maxHeight = null;
            } else {
                content2.style.maxHeight = content2.scrollHeight + "px";
            }
        });
    }

<button class="collapsible">Protocol</button>
<div class="content">
    <ul class="dropdown-menu">
DOCUMENTS LISTED HERE
    </ul>


 <button class="collapsible2">Archive</button>
 <div class="content2">
            <ul class="dropdown-menu2">
DOCUMENTS LISTED HERE
            </ul>
</div>
</div>