如何用HTML/CSS/Bootstrap4实现行内图片隐藏与点击触发显示？

开发者阿泽

2026-7-21

实现方案

1. 页面结构调整

把第三行的3张图片放在单独的Bootstrap行容器里，给这个行加自定义类（比如illustration-row），同时用Bootstrap自带的d-none类实现默认隐藏：

<!-- 前两行图片 -->
<div class="row">
  <div class="col-md-4"><img src="img1.jpg" alt="图片1"></div>
  <div class="col-md-4"><img src="img2.jpg" alt="图片2"></div>
  <div class="col-md-4"><img src="img3.jpg" alt="图片3"></div>
</div>
<div class="row">
  <div class="col-md-4"><img src="img4.jpg" alt="图片4"></div>
  <div class="col-md-4"><img src="img5.jpg" alt="图片5"></div>
  <div class="col-md-4"><img src="img6.jpg" alt="图片6"></div>
</div>

<!-- 第三行图片：默认隐藏 -->
<div class="row illustration-row d-none">
  <div class="col-md-4"><img src="img7.jpg" alt="插画1"></div>
  <div class="col-md-4"><img src="img8.jpg" alt="插画2"></div>
  <div class="col-md-4"><img src="img9.jpg" alt="插画3"></div>
</div>

<!-- 触发按钮 -->
<button id="show-illustrations" class="btn btn-primary">查看插画</button>

2. JavaScript实现切换逻辑

用原生JS给按钮绑定点击事件，通过切换d-none类控制第三行的显示状态：

// 获取按钮和目标行元素
const showBtn = document.getElementById('show-illustrations');
const illustrationRow = document.querySelector('.illustration-row');

// 点击切换显示/隐藏
showBtn.addEventListener('click', function() {
  illustrationRow.classList.toggle('d-none');
  // 可选：同步切换按钮文本
  this.textContent = illustrationRow.classList.contains('d-none') ? '查看插画' : '隐藏插画';
});

// 如果只需要点击后显示、不需要隐藏，替换成这段代码：
// showBtn.addEventListener('click', function() {
//   illustrationRow.classList.remove('d-none');
// });