时间戳

首页 > 解决方案 > 从菜单项而不是顶级菜单触发模式卡 - HTML、CSS、JS

javascript - 从菜单项而不是顶级菜单触发模式卡 - HTML、CSS、JS

问题描述

我是编码新手，希望有人能帮助理解我哪里出错了。我在从导航栏项目触发模式卡弹出窗口时遇到问题。到目前为止，我尝试过的所有操作都会触发顶部菜单项的模式。下拉菜单中的每个导航栏项目都将有一个指向模式卡的链接。
预先感谢您的帮助！！

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');
});
<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>

标签： javascripthtmlcss

解决方案

您将模式定位在顶级菜单中，data-target="#modal"这是错误的，因为没有 id 为“modal”的元素。您需要在您的菜单项中执行此操作，因为您的模式的 id 在data-target="#framingLumber"哪里并且不需要。所以你的代码看起来像这样：framingLumberhref

<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>

推荐阅读