如何为Label触发的Radio选项菜单实现点击切换（Toggle）显示隐藏功能？

当前点击Category标签仅能展示radio选项菜单，无法实现点击切换隐藏的效果，可通过以下修改实现toggle功能：

修改后代码 #

HTML代码 #

<label class="text-left text-uppercase mt-1 sidenav-text w-100" onclick="menuShow();">Category</label>
<p id="demo"></p>
<label class="text-left text-uppercase mt-1 sidenav-text w-100" onclick="valueShow();">value</label>

JavaScript代码 #

var demo = document.getElementById('demo');
// 新增状态变量跟踪菜单显示状态
let isMenuVisible = false;

function menuShow(){
    if(isMenuVisible){
        // 若菜单已显示，清空内容实现隐藏
        demo.innerHTML = '';
    } else {
        // 若菜单未显示，渲染radio选项
        demo.innerHTML = `
        <input type="radio" name="select" value="women"> Women<br>
        <input type="radio" name="select" value="men"> Men<br>
        <input type="radio" name="select" value="kid"> Kid<br>
        <input type="radio" name="select" value="boy"> Boy<br>    
        `;
    }
    // 切换状态
    isMenuVisible = !isMenuVisible;
}

关键修改说明 #

• 新增isMenuVisible状态变量，用于记录当前菜单的显示/隐藏状态
• 在menuShow函数中通过判断状态变量，决定是渲染radio选项还是清空内容
• 修正了radio的value属性，使其与选项文本对应（原代码所有value均为women，属于不合理设置）

内容的提问来源于stack exchange，提问作者Muhammad Ahmad