时间戳

首页 > 解决方案 > 子菜单关闭功能半工作，Javascript

javascript - 子菜单关闭功能半工作，Javascript

问题描述

我在处理此功能错误时遇到问题。我想要做的是当用户点击框外的任何地方时，框应该关闭。它只需点击几下，然后就停止了。起初控制台没有错误，但是当我第一次单击时，它显示无法读取 null 的属性样式。我的困惑是它只需点击几下，然后就停止了。请有任何提示！

window.addEventListener("mouseup", function (event) {
  let box = document.querySelector(".sub-menu.open");
  if (event.target != box && event.target.parentNode != box) {
    box.style.display = "none";
  }
});


<ul class="nav__links">
            <div class="desktop__nav">
              <li class="parent">
                <a href="#">Product</a>

                <img
                  class="menu-arrow"
                  src="./images/icon-arrow-light.svg"
                  alt="arrow"
                />
                <ul class="sub-menu">
                  <li>Overview</li>
                  <li>Pricing</li>
                  <li>Marketplace</li>
                  <li>Features</li>
                  <li>Integrations</li>
                </ul>
              </li>
              <li class="parent">
                <a href="#">Company</a>
                <img
                  class="menu-arrow"
                  src="./images/icon-arrow-light.svg"
                  alt="arrow"
                />
                <ul class="sub-menu">
                  <li>About</li>
                  <li>Team</li>
                  <li>Blog</li>
                  <li>Careers</li>
                </ul>
              </li>
              <li class="parent">
                <a href="#">Connect</a>
                <img
                  class="menu-arrow"
                  src="./images/icon-arrow-light.svg"
                  alt="arrow"
                />
                <ul class="sub-menu">
                  <li>Contact</li>
                  <li>Newsletter</li>
                  <li>LinkedIn</li>
                </ul>
              </li>
            </div>

.sub-menu {
  display: none;
}

.sub-menu.open {
  @include mobile {
    display: flex;
    flex-direction: column;
    background-color: $footer-text;
    width: 60vw;
    margin: 0 auto;
    color: $darkblue-headingtext;
    border-radius: 5px;
    position: relative;
    left: 5px;
    text-align: center;
  }

  position: absolute;
  width: 10vw;
  background-color: white;
  color: black;
  text-align: left;
  display: flex;
  flex-direction: column;
  margin: 6px auto;
  padding-left: 0.3rem;
  border-radius: 5px;
}

该代码有效，但单击几下后停止

标签： javascript

解决方案

回答

不需要JS！把那个讨厌的语言从这里拿出来，用 CSS 替换它，我们可以在下拉父元素上使用 tabindex="0" 来允许我们使用 CSS :focus！有了这个，我们可以轻松可靠地改变基于市中心父母集中状态的样式，要么

opacity: 0; pointer-events: none;

或者

opacity: 1; pointer-events: all;

我希望这是你正在寻找和帮助的！如果您想进一步解释或在 JS 中需要这个，请发表评论。

body {
  font-family: sans-serif;
}

.dropdownbutton {
  padding: 20px;
  background: whitesmoke;
  box-shadow: lightgray 0 12px 40px 0;
  transition: all 0.3s;
}

.dropdownbutton:hover {
  opacity: 1 !important;
  background: lightgray;
}

.dropdownbutton span {
  transition: 0.4s;
}

.dropdownparent:hover button span {
  transform: rotate(180deg);
}

.dropdownparent {
  position: relative;
  width: fit-content;
  transition: all 0.2s;
  text-decoration: none;
  user-select: none;
  cursor: pointer;
  border-radius: 4px;
  z-index: 1000;
  margin: 20px auto;
}

.dropdowncontentparent {
  opacity: 0;
  pointer-events: none;
  position: absolute;
  z-index: 1;
  right: -13px;
  top: 20px;
  background: transparent;
  padding: 12px;
  transition: all 0.3s;
}

.dropdowncontentchild {
  box-shadow: rgba(0, 0, 0, 0.15) 0 12px 22px 2px,
    rgba(0, 0, 0, 0.055) 0 12px 12px;
  border-radius: 4px;
  overflow: hidden;
  min-width: 200px;
  width: max-content;
  transition: all 0.3s;
  background: var(--nav);
  display: flex;
  flex-direction: column;
}

.dropdowncontentchild:hover {
  box-shadow: rgba(0, 0, 0, 0.3) 0 12px 22px 2px,
    rgba(0, 0, 0, 0.075) 0 12px 12px;
}

.dropdowncontentchild a {
  text-decoration: none;
  padding: 8px;
  transition: all 0.3s;
  color: black;
}

.dropdowncontentchild a:hover {
  background: whitesmoke;
}

.dropdownparent:focus .dropdowncontentparent {
  opacity: 1;
  pointer-events: all;
  top: 30px;
}

.dropdownparent:focus .dropdownbutton {
  opacity: 0.6;
  background: darkgray;
}
<div class="dropdownparent" tabindex="0">
  <a class="dropdownbutton">Dropdown Button</a>
  <div class="dropdowncontentparent">
    <div class="dropdowncontentchild">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </div>
</div>

推荐阅读