jQuery密码保护隐藏内容仅支持table标签，替换为div后失效求助

问题根源 #

核心问题出在CSS选择器的匹配逻辑上。你当前的CSS规则：

#table.show div>#HIDDENDIV {
  display: block;
}

要求#HIDDENDIV必须是某个div的直接子元素，且这个div位于带有show类的#table内部，才会触发显示效果。

但你替换为div/section后的HTML结构是：

<section id="table">
  <div id="HIDDENDIV">hidden stuff</div>
</section>

这里#HIDDENDIV是#table的直接子元素，中间没有额外的div层级，导致CSS选择器完全匹配不到，所以隐藏内容无法显示。

而之前使用table时能生效，是因为当时的结构（table→td）对应了匹配的选择器（比如你可能曾用#table.show td>#HIDDENDIV），替换标签后未同步调整CSS，才出现失效问题。

修复方案 #

方案1：简化CSS选择器（推荐） #

直接针对#table.show下的#HIDDENDIV，忽略层级关系，这样无论外层是table、div还是section都能生效：

#HIDDENDIV {
  display: none;
}

#table.show #HIDDENDIV {
  display: block;
}

方案2：调整HTML结构（保留原CSS） #

如果一定要保留原CSS的层级要求，在#table内部添加一层div包裹#HIDDENDIV：

<section id="table">
  <div>
    <div id="HIDDENDIV">hidden stuff</div>
  </div>
</section>

额外优化建议 #

你的JS代码存在潜在问题：event参数未声明，在严格模式下会报错；同时重复获取DOM元素也可以优化，修改后的代码如下：

$("#password").keydown(function(event) {
  if (event.keyCode == 13) document.getElementById('button').click()
});

$("#button").click(function() {
  const passwordInput = document.getElementById('password');
  if (passwordInput.value == '123') {
    document.getElementById('table').classList.toggle('show');
    document.getElementById('passw').style.display = 'none';
  } else {
    alert('Invalid Password!');
    passwordInput.setSelectionRange(0, passwordInput.value.length);
  }
});

内容的提问来源于stack exchange，提问作者Asma Binta Younus