如何停止:悬停并在导航子菜单上设置onClick

Question

我试图在我的Wordpress网站上建立一个响应性的导航，在那里我正在从头开始构建一个模板。我有不错的经验，HTML和CSS(SCSS)，一些PHP，但没有那么多的Javascript或Wordpress方式。

我希望删除我的子菜单中“服务”li下的“悬停”元素，并让它在单击平板和移动设备时触发。我知道这将类似于我如何做移动菜单按钮，但我正在努力找出最好的方式来做。

谁能给我个主意吗？提前谢谢。

​

function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}

header {
  height: 128px;
  border-bottom: 1px solid #f0f0f0;
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 4000;
  background: white;
}
header .nav-container {
  max-width: 100em;
  margin: auto;
  display: flex;
  justify-content: space-between;
  z-index: 45;
  padding: 0 1.5rem;
}
header .nav-container .logo {
  width: 14%;
  padding-top: 2.8rem;
}
header .nav-container p {
  display: none;
}
@media only screen and (max-width: 600px) {
  header .nav-container p {
    display: flex;
  }
}
header .nav-container nav {
  padding-top: 2rem;
}
@media only screen and (max-width: 600px) {
  header .nav-container nav {
    display: none;
  }
}
@media only screen and (max-width: 600px) {
  header .nav-container nav ul {
    flex-direction: column;
    display: flex;
  }
}
header .nav-container nav ul li {
  position: relative;
  display: inline-block;
}
header .nav-container nav ul li a {
  display: inline-block;
  transition: all 0.5s linear;
  text-decoration: none;
  padding: 16px 10px;
  color: #00458B;
}
header .nav-container nav ul li a:hover {
  color: #00458B;
}
header .nav-container nav ul li ul {
  display: none;
  background: white;
  position: absolute;
  top: 100%;
  width: 160px;
  padding: 0;
  z-index: 500;
}
header .nav-container nav ul li ul li, header .nav-container nav ul li ul a {
  width: 100%;
}
header .nav-container nav ul li:hover ul {
  display: block;
}
header .nav-container nav ul .menu-item-40 a {
  padding: 0;
}

<header>
    <div class="nav-container">
       <p onclick="myFunction()"> Click</p>
        <nav class="nav" role="navigation" id="myDIV">
            <ul>
                <li class="nav-item"><a href="/">Home</a>
                </li>
                <li class="nav-item"><a href="/">About us</a>
                </li>
                <li class="nav-item"><a href="/">Services</a>
                    <ul class="sub-menu">
                        <li class="nav-item "><a href="/">Windows</a>
                        </li>
                        <li class="nav-item"><a href="/">Glass</a>
                        </li>
                        <li class="nav-item"><a href="/">Doors</a>
                        </li>
                        <li class="nav-item"><a href="/">Roofline</a>
                        </li>
                    </ul>
                </li>
                <li class="nav-item"><a href="/">Our Work</a>
                </li>
                <li class="nav-item"><a href="/">Contact Us</a>
                </li>
            </ul>
        </nav>
    </div>
</header>

​

Answer 1

用媒体查询包起来，这样它就不能在移动和平板电脑上工作了。

header .nav-container nav ul li:hover ul {
  display: block;
}

Answer 2

这只是许多可能的解决方案之一，但我认为它给了你一个关于如何解决问题的想法。

首先，当移动按钮出现时，必须用媒体查询包装以下选择器，以禁用悬停。在你的例子中，它看起来是这样的：

@media only screen and (min-width: 601px) {
    header .nav-container nav ul li:hover ul {
        display: block;
    }
}

为了附加切换功能，我建议将一个js-submenu-toggle类添加到所有具有同级子菜单的a元素中。我更喜欢在我的类中添加一个js前缀，将它们标记为只与javascript结合使用且没有样式附加到它们的类：

<ul>
    ...
    <li class="nav-item">
        <a href="/" class="js-toggle-submenu">Services</a>
        <ul class="sub-menu">
            ...
        </ul>
    </li>
    ...
</ul>

对于实际功能，请使用toggle函数添加和删除is-active类，单击submenu元素，然后单击matchMedia函数，使切换功能仅在移动菜单按钮可见时可用：

document.addEventListener('click', event => {
    const element = event.target;
    const mediaQuery = window.matchMedia('(max-width: 600px)');

    if(element.matches('.js-submenu-toggle') && mediaQuery.matches) {
        // Prevents the default behaviour of the `a`-tag with an `href`-attribute
        event.preventDefault();
        element.nextElementSibling.classList.toggle('is-active');
    }
});

is-active类应该如下所示：

.is-active {
    display: block;
}