使用JavaScript点击Div控制另一Div显示隐藏的问题求助

嘿，其实你完全不用纠结Div没有value/name属性这个问题，实现点击切换显示隐藏的方法有很多，而且都很直接，我给你几个实用的方案：

方案一：直接操作元素的style.display属性 #

这是最基础的方式，不需要额外的CSS类，直接通过JS切换目标Div的行内样式：

HTML结构 #

<!-- 触发点击的Div -->
<div id="toggleTrigger">点击我切换内容显示/隐藏</div>
<!-- 要切换的目标Div，默认隐藏 -->
<div id="targetDiv" style="display: none;">这里是要展示/隐藏的内容</div>

JavaScript代码 #

// 获取两个Div的DOM引用
const triggerBtn = document.getElementById('toggleTrigger');
const targetContent = document.getElementById('targetDiv');

// 给触发Div添加点击事件监听
triggerBtn.addEventListener('click', () => {
  // 判断当前目标Div是否处于隐藏状态
  if (targetContent.style.display === 'none') {
    // 显示：设置display为你需要的布局值（block/flex/inline-block等）
    targetContent.style.display = 'block';
  } else {
    // 隐藏：设置display为none
    targetContent.style.display = 'none';
  }
});

如果你的目标Div原本用的是flex这类布局，建议先通过getComputedStyle获取它的初始display值，避免硬编码：

// 先获取初始的display样式
const initialDisplay = window.getComputedStyle(targetContent).display;

triggerBtn.addEventListener('click', () => {
  targetContent.style.display = targetContent.style.display === 'none' ? initialDisplay : 'none';
});

方案二：用CSS类控制（更推荐！） #

这种方式把样式和逻辑分离，以后要修改隐藏的样式（比如改成渐变隐藏、透明度变化），只需要改CSS，不用动JS，维护起来更方便：

CSS样式 #

/* 定义隐藏的类 */
.hidden {
  display: none;
  /* 你也可以换成其他隐藏方式，比如：
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s;
  */
}

HTML结构 #

<div id="toggleTrigger">点击我切换内容显示/隐藏</div>
<!-- 默认添加hidden类，初始隐藏 -->
<div id="targetDiv" class="hidden">这里是要展示/隐藏的内容</div>

JavaScript代码 #

const triggerBtn = document.getElementById('toggleTrigger');
const targetContent = document.getElementById('targetDiv');

triggerBtn.addEventListener('click', () => {
  // 直接切换hidden类的存在状态
  targetContent.classList.toggle('hidden');
});

关于你尝试的hidden input #

其实完全没必要借助hidden input来存状态，因为目标Div自身的样式/类状态就已经能反映它的显示状态了。如果一定要用的话，逻辑应该是这样的（但不推荐，多此一举）：

<div id="toggleTrigger">点击我切换内容显示/隐藏</div>
<div id="targetDiv" style="display: none;">这里是要展示/隐藏的内容</div>
<input type="hidden" id="statusInput" value="hidden">

const triggerBtn = document.getElementById('toggleTrigger');
const targetContent = document.getElementById('targetDiv');
const statusInput = document.getElementById('statusInput');

triggerBtn.addEventListener('click', () => {
  if (statusInput.value === 'hidden') {
    targetContent.style.display = 'block';
    statusInput.value = 'visible';
  } else {
    targetContent.style.display = 'none';
    statusInput.value = 'hidden';
  }
});

总结一下：核心是不需要依赖Div的value或name属性，直接通过DOM获取元素引用，操作它的样式类或者display属性就能实现切换。推荐用CSS类的方式，更灵活易维护。

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