如何让show/hide脚本支持多个隐藏按钮，且cv_cont元素默认可见？

核心问题：HTML 规范要求同一页面内 id 必须全局唯一，原代码中多个隐藏按钮共用同一个 hide_cv id，导致 jQuery 的 ID 选择器只能匹配到第一个隐藏按钮，其余按钮点击无响应。

1. 修改HTML结构 #

把所有隐藏按钮的 id 属性替换为 class 属性，cv_cont 无需额外修改，默认就是可见状态。

<button id="show_cv">Show</button>
<button class="hide_cv">Hide 1</button>
<button class="hide_cv">Hide 2</button>
<button class="hide_cv">Hide 3</button>
<button class="hide_cv">Hide 4</button>
<div id="cv_cont">Content Visible</div>

2. 修改JavaScript逻辑 #

把隐藏按钮的选择器从 ID 选择器换成类选择器，即可给所有隐藏按钮绑定点击事件：

// 所有class为hide_cv的按钮点击都隐藏cv_cont
$(".hide_cv").click(function() {
    $("#cv_cont").hide();
});

$("#show_cv").click(function() {
    $("#cv_cont").show();
});

如果需要强制确保 cv_cont 默认可见，可补充一行CSS：

#cv_cont {
    display: block;
}

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