点击非顶层navbar菜单项触发modal卡片的HTML/CSS/JS实现问题

问题原因 #

• document.querySelector() 只会匹配页面中第一个符合选择器的元素，你目前只给第一个导航项绑定了点击事件，下拉菜单里的所有导航项都没有绑定触发逻辑，自然无法响应点击。
• 目前你只定义了1个模态框结构，如果要每个车型对应不同的模态框内容，要么提前给每个车型写独立的模态框，要么点击对应导航项时动态修改模态框的标题、内容字段。
• 你当前给模态框默认加了is-active类，页面加载完成就会直接显示弹窗，不符合交互逻辑。
• 导航项的a标签如果设置了href锚点，点击会触发默认的页面滚动行为，需要手动阻止。

修正后代码 #

HTML代码

<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">Ford</a>
          <div class="navbar-dropdown">
            <!-- 每个导航项加data-modal属性指定对应模态框ID -->
            <a class="navbar-item" data-modal="modal-explorer">
              Explorer
            </a>
            <a class="navbar-item" data-modal="modal-focus">
              Focus
            </a>
            <a class="navbar-item" data-modal="modal-flex">
              Flex
            </a>
            <a class="navbar-item" data-modal="modal-f150">
              F-150
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</section>

<!-- Explorer对应的模态框，去掉默认的is-active -->
<div class="modal" id="modal-explorer">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Explorer</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      Explorer的专属内容
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">保存修改</button>
      <button class="button">取消</button>
    </footer>
  </div>
</div>

<!-- Focus对应的模态框 -->
<div class="modal" id="modal-focus">
  <div class="modal-background"></div>
  <div class="modal-card">
    <header class="modal-card-head">
      <p class="modal-card-title">Focus</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      Focus的专属内容
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">保存修改</button>
      <button class="button">取消</button>
    </footer>
  </div>
</div>
<!-- 剩下Flex、F-150的模态框按照上面的格式补充即可 -->

JS代码

// 选中所有的.navbar-item元素
const allNavItems = document.querySelectorAll(".navbar-item");
// 选中所有模态框的关闭背景、关闭按钮
const modalBgs = document.querySelectorAll('.modal-background');
const closeBtns = document.querySelectorAll('.delete[aria-label="close"]');

// 给所有导航项绑定点击事件
allNavItems.forEach(item => {
  item.addEventListener('click', (e) => {
    // 阻止a标签默认跳转行为
    e.preventDefault();
    // 获取当前点击项对应的模态框ID
    const targetModalId = item.getAttribute('data-modal');
    if (!targetModalId) return;
    // 显示对应模态框
    const targetModal = document.getElementById(targetModalId);
    targetModal.classList.add('is-active');
  })
})

// 绑定模态框背景点击关闭事件
modalBgs.forEach(bg => {
  bg.addEventListener('click', () => {
    // 找到当前背景所属的模态框，移除激活类
    const currentModal = bg.closest('.modal');
    currentModal.classList.remove('is-active');
  })
})

// 绑定右上角关闭按钮点击关闭事件
closeBtns.forEach(btn => {
  btn.addEventListener('click', () => {
    const currentModal = btn.closest('.modal');
    currentModal.classList.remove('is-active');
  })
})

可选优化 #

如果不想维护多个模态框结构，也可以只保留一个模态框，点击不同导航项时，把对应车型的标题、内容动态赋值到模态框的对应节点里，减少重复代码。

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