本文详解 jquery 中多级嵌套 radio 控件（如“move contents”下再分 tier i/tier ii）的显隐控制逻辑，重点解决因 css 类声明顺序导致 `.subtier2-options` 无法显示的常见问题，并提供可复用、结构清晰的事件绑定方案。
在构建具有层级关系的表单交互时（例如：一级操作 → 二级子操作 → 三级配置项），开发者常借助 radio 按钮实现“单选触发显隐”的效果。但当嵌套层级加深（如 moveContents 下再包含 Tier I move 和 Tier II move 两个子 radio 组），若未注意 CSS 优先级与事件委托逻辑，极易出现子级内容（如 .subtier2-options）始终不显示的问题。
根本原因在于 CSS 类的声明顺序影响样式优先级：原代码中 .shown { display: block; } 定义在 .subtier2-options { display: none; } 之前，导致即使 JavaScript 成功添加了 shown 类，后续加载的 .subtier2-options 规则仍会覆盖 display: block，最终维持 display: none 状态。
✅ 正确做法是：将通用显隐类 .shown 放置在所有具体容器类（如 .tier2-options、.subtier2-options）之后，确保其 display: block 具有更高权重：
.tier2-options {
display: none;
margin-left: 1rem;
padding: 1rem;
background-color: #EEE;
}
.subtier2-options {
display: none;
margin-left: 1rem;
padding: 1rem;
background-color: #EEE;
}
/* ✅ 必须放在最后，以保证高优先级 */
.shown {
display: block !important; /* 可选：加 !important 进一步保障 */
}同时，JavaScript 事件绑定需严格对应 DOM 结构层级：
- 一级 radio（.tier1-options :radio）控制 .tier2-options 的显隐；
- 二级 radio（.subtier1-options :radio）控制 .subtier2-options 的显隐；
且每次切换时，应仅清除当前层级对应的目标容器，避免误清其他层级内容：
// 一级切换：显示/隐藏 .tier2-options
$(".tier1-options :radio").on("change", function () {
// 隐藏所有 tier2 区域，并清空内部表单值
$(".tier2-options")
.removeClass("shown")
.find("input, select, textarea").val("");
// 显示当前选中项关联的 tier2 区域
$(this)
.closest(".tier1-options") // 推荐用 closest() 替代 parents()，更精准
.find(".tier2-options")
.addClass("shown");
});
// 二级切换：显示/隐藏 .subtier2-options
$(".subtier1-options :radio").on("change", function () {
// 仅操作同级的 subtier2 区域（不干扰 tier2 或其他 subtier）
$(".subtier2-options")
.removeClass("shown")
.find("input, select, textarea").val("");
$(this)
.closest(".subtier1-options")
.find(".subtier2-options")
.addClass("shown");
});⚠️ 注意事项：
- 使用 .closest() 替代 .parents() 可避免跨层级误匹配（如 parents('.tier1-options') 可能向上找到外层容器）；
- 清空表单时建议扩展选择器为 "input, select, textarea"，兼容更多控件类型；
- 若页面存在动态插入的 radio 元素，应改用事件委托写法：$(document).on("change", ".tier1-options :radio", handler)；
- 所有 name 属性需保持唯一性或按层级隔离（本例中所有 radio 共享 name="useroption" 是合理设计，因语义上属于同一组主操作）。
通过以上调整，即可实现稳定、可扩展的多级单选联动效果——点击 “Move Contents” 展开子选项区，再点击 “Tier I move” 或 “Tier II move”，对应下拉菜单即刻呈现，无样式冲突，逻辑清晰可控。
