从菜单项而非顶级菜单触发模态卡-HTML、CSS、JS

Question

我对编码还不熟悉，希望有人能帮助我理解哪里出了问题。我在从导航栏项目获取模式卡弹出窗口以触发时遇到问题。到目前为止，我所尝试的一切都会触发顶部菜单项的模态。下拉列表中的每个导航栏项都有一个指向模式卡的链接<提前感谢您的帮助！！

const item = document.querySelector(".navbar-item");
const modalBg = document.querySelector('.modal-background');
const modal = document.querySelector('.modal');

item.addEventListener('click', () => {
  modal.classList.add('is-active');
});

modalBg.addEventListener('click', () => {
  modal.classList.remove('is-active');
});

html lang-html prettyprint-override"><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" data-target="#modal">Ford</a>
          <div class="navbar-dropdown">
            <a class="navbar-item">
                                Explorer
                            </a>
            <a class="navbar-item" href="#framingLumber">
                                Focus
                            </a>
            <a class="navbar-item">
                                Flex
                            </a>
            <a class="navbar-item">
                                F-150
                            </a>
            </a>
          </div>
        </div>
      </div>
    </div>
  </nav>
</section>

<div class="modal is-active" id="modal">
  <div class="modal-background"></div>
  <div class="modal-card" id="framingLumber">
    <header class="modal-card-head">
      <p class="modal-card-title">Modal title</p>
      <button class="delete" aria-label="close"></button>
    </header>
    <section class="modal-card-body">
      <!-- Content ... -->
    </section>
    <footer class="modal-card-foot">
      <button class="button is-success">Save changes</button>
      <button class="button">Cancel</button>
    </footer>
  </div>
</div>

Answer 1

您在顶层菜单中将您的modal定位为data-Target="#modal"，这是错误的，因为没有带有id'modal'的元素。您需要在菜单项中以data-Target="#framingLumber"的形式执行此操作，其中framingLumber是您的modal的id，并且不需要href。所以你的代码看起来像这样：

<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">
                    <a class="navbar-item">Explorer</a>
                    <a class="navbar-item" data-target="#framingLumber">Focus</a>
                    <a class="navbar-item">Flex</a>
                    <a class="navbar-item">F-150</a>
                </div>
            </a>
        </div>
    </div>
</div>