如何显示已存在的隐藏div？点击按钮展示隐藏div的实现方法

你给出的原始HTML存在标签闭合错误，修正后的标准结构如下（补充了触发用的按钮元素）：

<div>
  <div class="questions_body" style="display: none;">
    <div class="questions">
      <!-- 问题内容放在这里 -->
    </div>
  </div>
  <button id="toggleQuestionBtn">查看问题</button>
</div>

核心说明 #

别信网上说什么display: none的元素无法获取的说法，只要这个元素已经加载到页面DOM结构里、没有被动态移除，不管是否可见，都可以通过常规DOM选择器正常访问，和操作普通可见元素没有任何区别，只要修改它的display样式值就能控制显示。

原生JS实现代码 #

// 1. 获取目标隐藏元素
const questionBodyEl = document.querySelector('.questions_body');
// 2. 获取触发按钮
const triggerBtn = document.getElementById('toggleQuestionBtn');

// 3. 绑定点击事件
triggerBtn.addEventListener('click', () => {
  // 仅展示元素
  questionBodyEl.style.display = 'block';

  // 如果需要点击切换显示/隐藏状态，替换为下面的代码即可
  // questionBodyEl.style.display = questionBodyEl.style.display === 'none' ? 'block' : 'none';
})

提示：display的属性值可以根据你的布局需求调整，如果你需要元素按弹性盒布局就设为flex，网格布局设为grid即可，不局限于block。

jQuery 实现方式（如果你的项目引入了jQuery） #

$('#toggleQuestionBtn').click(function() {
  // 仅显示
  $('.questions_body').show();
  // 切换显示隐藏用下面的写法
  // $('.questions_body').toggle();
})

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