如何使用 javascript 打开和关闭带有单选按钮的下拉子菜单？

Question

我目前有一个完全用 html 和 css 编写的下拉菜单，我目前具有以下功能：如果用户单击菜单中的选项 - 它将通过隐藏的单选按钮打开子菜单。但是，对于单选按钮——一旦你选择了一个选项——你就不能作为用户取消选择它。这就是为什么我想实现单击选中的单选按钮取消选择它的功能（如果它在下拉列表中）。

---

 const DROPDOWN_SELECTION = document.querySelectorAll(".menu input[type='radio']");
DROPDOWN_SELECTION.forEach( element => {
    element.addEventListener("click", () => {
        if(element.checked === true){
            element.checked = false;
        }
    });
}); 

.dropdown{
    width: 250px;
    background-color:black;
    color:white;
}

.dropdown label{
    font-size:30px;
}

.dropdown ul{
    display: none;
}

[id^=btn]:checked + ul{
    display:block;
}


.dropdown input{
    display: none;
}

    <div class ="dropdown">
        <label for = "btn-Main" class="button">Dropdown List</label>
        <input type="checkbox" id="btn-Main">
        <ul class="menu">
            <li>
                <label for = "btn-Two" class="first">Option A</label>
                <input type="radio" name="faction" id="btn-Two">
                <ul>
                    <li>Option A.1</li>
                    <li>Option A.2</li>
                </ul>
            </li>

            <li>
                <label for = "btn-Three" class="second">Option B
                    <span class ="arrow down"></span>
                </label>
                <input type="radio" name="faction" id="btn-Three">
                <ul>
                    <li>Option B.1</li>
                    <li>Option B.2</li>
                </ul>
            </li>

        </ul>
    </div>

上面的代码是我尝试创建此功能的尝试，但是经过测试-子菜单不再打开。我的假设是代码检查单选按钮是否在用户输入的检查值发生变化之后检查，而不是之前。因此，用户无法打开子菜单，因为它会自动取消选中。我只添加了最细微的样式，以便最终结果在视觉上更有意义

---

我没有使用复选框而不是单选按钮的原因是因为您一次只能选择一个选项作为单选按钮的功能。这意味着在任何给定时间只能打开一个子菜单，并且会避免混乱并自动关闭其他子菜单。我希望通过允许用户通过再次单击关闭他们正在查看的子菜单来进一步减少混乱。

有些人遇到过类似的问题。然而，他们的代码是在 jQuery 中，而我的是在 javascript 中——我想找到一个在 javascript 中的解决方案，因为我是网页设计的新手，并且不想在完成我的第一个项目之前学习一门新语言。无论如何，这里有一些来自有类似问题的人的链接（在 jQuery 中）：

---

Stack Overflow 这个问题的 JQuery 版本：
双击取消选中单选按钮
如何取消选中单选按钮

Answer 1

所以我找到了一种方法来实现我正在谈论的功能，但是 - 如果用户想打开另一个子菜单，它确实为用户添加了一个额外的步骤，因为他们被迫先关闭当前子菜单。我会尝试找到一个解决方案来解决这个问题，但现在这是当前的解决方案 - 只需更改 js 文件：

var subMenuOpen = false;

const DROPDOWN_SELECTION = document.querySelectorAll(".menu input[type='radio']");
 DROPDOWN_SELECTION.forEach( element => {
    element.addEventListener("click", () => {
        if(subMenuOpen === true){
            element.checked = false;
            subMenuOpen = false;
        }
        else {
            subMenuOpen = true;
        }
    });
 });