子菜单关闭功能半工作，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;
}

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

解决方法

opacity: 0; pointer-events: none;

opacity: 1; pointer-events: all;

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.15) 0 12px 22px 2px,rgba(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.3) 0 12px 22px 2px,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>

大佬总结

以上是大佬教程为你收集整理的子菜单关闭功能半工作，Javascript全部内容，希望文章能够帮你解决子菜单关闭功能半工作，Javascript所遇到的程序开发问题。

如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。