如何实现点击图片触发可折叠菜单的显示/隐藏切换？

可以通过 HTML + CSS + JavaScript 组合实现这个需求，具体代码如下：

完整代码示例 #

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义隐藏类，控制元素显示状态 */
        .toggle-hidden {
            display: none;
        }
        /* 给图片添加鼠标指针样式，提示可点击 */
        .toggle-icon {
            cursor: pointer;
            width: 64px;
            height: 64px;
        }
    </style>
</head>
<body>
    <!-- 触发切换的图片 -->
    <img 
        src="https://cdn3.iconfinder.com/data/icons/glypho-generic-icons/64/cog-settings-512.png" 
        alt="设置图标" 
        class="toggle-icon"
        id="toggleBtn"
    >

    <!-- 需要切换显示/隐藏的单选框容器 -->
    <div id="radioWrapper" class="toggle-hidden">
        <input type="radio">
        <input type="radio">
    </div>

    <script>
        // 获取页面元素
        const toggleBtn = document.getElementById('toggleBtn');
        const radioWrapper = document.getElementById('radioWrapper');

        // 绑定点击事件实现切换逻辑
        toggleBtn.addEventListener('click', () => {
            // 切换隐藏类，实现显示/隐藏的切换
            radioWrapper.classList.toggle('toggle-hidden');
        });
    </script>
</body>
</html>

核心逻辑说明 #

• CSS部分：通过自定义的.toggle-hidden类控制元素隐藏，给图片添加鼠标指针样式优化交互体验。
• HTML部分：图片设置唯一id方便JS获取，单选框放在统一容器中，初始添加.toggle-hidden类实现默认隐藏。
• JavaScript部分：给图片绑定点击事件，利用classList.toggle()方法一键切换容器的隐藏类，实现点击一次显示、再点击一次隐藏的往复效果。

内容的提问来源于stack exchange，提问作者displayName is undefined