在CodePen中实现Chess Bot UI嵌套子菜单及选项遇阻

我正在开发Chess Bot项目，在CodePen中实现UI时遇到嵌套子菜单的问题：使用radio buttons导致菜单嵌套逻辑复杂混乱，尝试多种方案后仍无法让子菜单及对应选项在主菜单内正常显示。

期望实现的UI结构如下：

主菜单: "Chess BOT"
主菜单子菜单: "Game Settings"
Enable auto run
Enable auto move
Enable Suboptimal Moves
Enable Random Time
Auto Next Game

主菜单子菜单: "Game Stats"
Total Games: 0
Total Won: 0
Your win probability is: %

主菜单子菜单: "Recommendations"
Recommended Move:
Suboptimal Move:

主菜单子菜单: "Timing"
Auto Run Delay (Seconds): "[Text Input]"
Minimum Time (Seconds): "[Text Input]"
Maximum Time (Seconds): "[Text Input]"

主菜单子菜单: "AI Strength"
Depth Strength: "[Slider ranging from a minimum of 0 and max of 20]"
Suboptimal Moves Percentage: "[Slider ranging from a minimum of 0 and max of 100]"

主菜单子菜单: "Debug Settings"
Enable Debug Mode
Start Next Game
Save Settings
Load Settings

恳请提供在该项目中正确实现嵌套子菜单及选项的协助与指导，作为感谢，可提供Chess Bot测试版访问权限用于测试。

核心思路 #

放弃radio按钮的实现方式，改用HTML原生的<details>（可折叠容器）和<summary>（折叠标题）组件，天然支持嵌套结构，逻辑简单且无需复杂JS/CSS控制显示状态。

对应需求的代码示例 #

<!-- 主菜单容器 -->
<div class="chess-bot-menu">
  <h1>Chess BOT</h1>

  <!-- Game Settings 子菜单 -->
  <details class="submenu">
    <summary>Game Settings</summary>
    <ul class="menu-options">
      <li><input type="checkbox" id="auto-run"> <label for="auto-run">Enable auto run</label></li>
      <li><input type="checkbox" id="auto-move"> <label for="auto-move">Enable auto move</label></li>
      <li><input type="checkbox" id="suboptimal-moves"> <label for="suboptimal-moves">Enable Suboptimal Moves</label></li>
      <li><input type="checkbox" id="random-time"> <label for="random-time">Enable Random Time</label></li>
      <li><button id="auto-next-game">Auto Next Game</button></li>
    </ul>
  </details>

  <!-- Game Stats 子菜单 -->
  <details class="submenu">
    <summary>Game Stats</summary>
    <div class="stats-display">
      <p>Total Games: <span id="total-games">0</span></p>
      <p>Total Won: <span id="total-won">0</span></p>
      <p>Your win probability is: <span id="win-prob">0%</span></p>
    </div>
  </details>

  <!-- Recommendations 子菜单 -->
  <details class="submenu">
    <summary>Recommendations</summary>
    <div class="recommendations">
      <p>Recommended Move: <span id="recommended-move">-</span></p>
      <p>Suboptimal Move: <span id="suboptimal-move">-</span></p>
    </div>
  </details>

  <!-- Timing 子菜单 -->
  <details class="submenu">
    <summary>Timing</summary>
    <ul class="menu-options">
      <li>
        <label for="auto-run-delay">Auto Run Delay (Seconds):</label>
        <input type="number" id="auto-run-delay" min="0" step="0.1">
      </li>
      <li>
        <label for="min-time">Minimum Time (Seconds):</label>
        <input type="number" id="min-time" min="0" step="0.1">
      </li>
      <li>
        <label for="max-time">Maximum Time (Seconds):</label>
        <input type="number" id="max-time" min="0" step="0.1">
      </li>
    </ul>
  </details>

  <!-- AI Strength 子菜单 -->
  <details class="submenu">
    <summary>AI Strength</summary>
    <ul class="menu-options">
      <li>
        <label for="depth-strength">Depth Strength (0-20): <span id="depth-value">10</span></label>
        <input type="range" id="depth-strength" min="0" max="20" value="10">
      </li>
      <li>
        <label for="suboptimal-percent">Suboptimal Moves Percentage (0-100): <span id="suboptimal-value">20</span></label>
        <input type="range" id="suboptimal-percent" min="0" max="100" value="20">
      </li>
    </ul>
  </details>

  <!-- Debug Settings 子菜单 -->
  <details class="submenu">
    <summary>Debug Settings</summary>
    <ul class="menu-options">
      <li><input type="checkbox" id="debug-mode"> <label for="debug-mode">Enable Debug Mode</label></li>
      <li><button id="start-next-game">Start Next Game</button></li>
      <li><button id="save-settings">Save Settings</button></li>
      <li><button id="load-settings">Load Settings</button></li>
    </ul>
  </details>
</div>

配套基础CSS（用于美化菜单样式） #

.chess-bot-menu {
  font-family: Arial, sans-serif;
  max-width: 400px;
  margin: 20px auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background-color: #f9f9f9;
}

.submenu {
  margin: 10px 0;
  border: 1px solid #eee;
  border-radius: 4px;
  background-color: white;
}

.submenu summary {
  padding: 10px;
  font-weight: bold;
  cursor: pointer;
  background-color: #f0f0f0;
}

.submenu summary:hover {
  background-color: #e0e0e0;
}

.menu-options, .stats-display, .recommendations {
  padding: 10px 20px;
  list-style: none;
}

.menu-options li {
  margin: 8px 0;
}

input[type="range"] {
  width: 100%;
  margin-top: 5px;
}

补充JS（用于滑块实时显示值） #

// 绑定深度滑块值显示
const depthSlider = document.getElementById('depth-strength');
const depthValue = document.getElementById('depth-value');
depthSlider.addEventListener('input', () => {
  depthValue.textContent = depthSlider.value;
});

// 绑定子最优移动百分比滑块值显示
const suboptimalSlider = document.getElementById('suboptimal-percent');
const suboptimalValue = document.getElementById('suboptimal-value');
suboptimalSlider.addEventListener('input', () => {
  suboptimalValue.textContent = suboptimalSlider.value + '%';
});

整合到项目的步骤 #

1. 移除原有基于radio按钮的菜单结构及相关CSS/JS逻辑；
2. 将上述HTML代码替换到对应菜单区域；
3. 添加配套CSS到样式面板；
4. 添加补充JS到脚本面板；
5. 根据项目现有样式调整CSS细节（如颜色、字体匹配现有UI）。

这种实现方式逻辑清晰，原生支持折叠展开，无需处理radio按钮的选中状态冲突，完美匹配需求中的嵌套菜单结构。

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