点击navbar菜单项触发modal时所有模态卡片同时弹出问题求助

问题根因 #

• 所有模态卡片都放在同一个.modal容器下，给外层容器添加is-active类时，容器内所有卡片都会同步显示
• .navbar-item绑定的data-target属性和对应模态卡片的id不匹配：部分值缺少#前缀，还有命名不对应（比如Composite Decking菜单项的data-target写的是#Composite Decking，但对应模态卡片id是decking）
• JS仅绑定了第一个.navbar-item的点击事件，没有覆盖所有菜单项，也没有根据点击项的data-target匹配对应卡片单独显示
• 外层modal容器默认加了is-active类，页面加载就会触发模态框显示

修复步骤 #

1. 修正HTML代码 #

• 统一所有菜单项的data-target命名，和对应模态卡片id完全匹配，统一添加#前缀
• 移除外层modal容器默认的is-active属性
• 给所有.modal-card默认添加display: none样式，保证默认隐藏
• 你当前使用的是Bulma的modal组件，请确保已引入对应样式文件

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" />

<section>
  <nav class="navbar has-shadow" role="navigation" aria-label="dropdown navigation" id="navbar_link_modal">
    <div class="navbar-brand">
      <a class="navbar-burger" id="burger">
        <span></span>
        <span></span>
        <span></span>
      </a>
    </div>
    <div class="navbar-menu" id="nav-links">
      <div class="navbar-start">
        <div class="navbar-item has-dropdown is-hoverable">
          <a class="navbar-link">Lumber</a>
          <div class="navbar-dropdown">
            <a class="navbar-item" data-target="#decking">
              Composite Decking
            </a>
            <a class="navbar-item" data-target="#framingLumber">
              Framing Lumber
            </a>
            <a class="navbar-item" data-target="#treatedLumber">
              Treated Lumber
            </a>
            <a class="navbar-item" data-target="#plywood">
              Plywood
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</section>

<!--Modal-->
<div class="modal" id="modal">
  <div class="modal-background"></div>
  <div class="modal-card" id="framingLumber" style="display:none">
    <header class="modal-card-head">
      <p class="modal-card-title">Framing Lumber</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <img src="pics/lumberOnline.jpg" alt="">
    </section>
    <footer class="modal-card-foot">
      <p>We can meet your framing lumber needs. Including long length lumber.</p>
    </footer>
  </div>
  <div class="modal-card" id="decking" style="display:none">
    <header class="modal-card-head">
      <p class="modal-card-title">Composite Decking</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <p>Insert picture of composite decking here.</p>
    </section>
    <footer class="modal-card-foot">
      <p>Less maintenance, more durable and a longer life. Let composite decking make your life easier!
      </p>
    </footer>
  </div>
  <div class="modal-card" id="treatedLumber" style="display:none">
    <header class="modal-card-head">
      <p class="modal-card-title">Treated Lumber</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <img src="pics/treatedLumberOnline_cropped.jpg" alt="">
    </section>
    <footer class="modal-card-foot">
      <p>Use pressure treated lumber for jobs where the lumber will be exposed to weather.
      </p>
    </footer>
  </div>
  <div class="modal-card" id="plywood" style="display:none">
    <header class="modal-card-head">
      <p class="modal-card-title">Plywood</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <img src="pics/plywoodOnline_cropped.jpg" alt="">
    </section>
    <footer class="modal-card-foot">
      <p>Different types of plywood.....
      </p>
    </footer>
  </div>
</div>

2. 修正JS代码 #

• 选中所有菜单项绑定点击事件
• 点击时先隐藏所有模态卡片，再根据data-target显示对应卡片，最后激活modal容器
• 新增关闭按钮的点击事件，关闭时隐藏所有卡片同时取消modal容器的激活状态

const navItems = document.querySelectorAll(".navbar-item");
const modalBg = document.querySelector('.modal-background');
const modal = document.querySelector('.modal');
const modalCards = document.querySelectorAll('.modal-card');
const closeBtns = document.querySelectorAll('.delete');

// 绑定所有菜单项点击事件
navItems.forEach(item => {
  item.addEventListener('click', () => {
    // 获取目标卡片id
    const targetId = item.getAttribute('data-target');
    const targetCard = document.querySelector(targetId);
    // 先隐藏所有卡片
    modalCards.forEach(card => card.style.display = 'none');
    // 显示目标卡片
    targetCard.style.display = 'block';
    // 激活modal
    modal.classList.add('is-active');
  });
});

// 点击遮罩关闭
modalBg.addEventListener('click', () => {
  modal.classList.remove('is-active');
  modalCards.forEach(card => card.style.display = 'none');
});

// 点击关闭按钮关闭
closeBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    modal.classList.remove('is-active');
    modalCards.forEach(card => card.style.display = 'none');
  });
});

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