我想修复点击菜单按钮问题

如何解决我想修复点击菜单按钮问题

要在我点击窗口或滚动时隐藏菜单，我是这样尝试的。

var flag=0;

function myFunction(x) {
    x.classList.toggle("change");
    document.getElementById("myDropdown").classList.toggle("show");
}

window.onclick = function(event) {
    if (flag==0) {
        flag=1;
    }
    else if (flag==1) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
        var menu_btn = document.getElementsByClassName("menu_btn");
        var i;
        for (i = 0; i < menu_btn.length; i++) {
          var openDropdown = menu_btn[i];
          if (openDropdown.classList.contains('change')) {
            openDropdown.classList.remove('change');
          }
        }
        flag=0;
    }
}
window.addEventListener("scroll",function() {
    if (flag==1) {
        var dropdowns = document.getElementsByClassName("dropdown-content");
        var i;
        for (i = 0; i < dropdowns.length; i++) {
          var openDropdown = dropdowns[i];
          if (openDropdown.classList.contains('show')) {
            openDropdown.classList.remove('show');
          }
        }
        var menu_btn = document.getElementsByClassName("menu_btn");
        var i;
        for (i = 0; i < menu_btn.length; i++) {
          var openDropdown = menu_btn[i];
          if (openDropdown.classList.contains('change')) {
            openDropdown.classList.remove('change');
          }
        }
        flag=0;
    }
});

function menuclick(underline) {
    var focused = document.getElementsByClassName("focused");
    var i;
    for (i = 0; i < focused.length; i++) {
        var under = focused[i];
        if (under.classList.contains('focused')) {
            under.classList.remove('focused');
        }
    }
    if (!underline.parentElement.classList.contains('focused')) {
        underline.parentElement.classList.add('focused');
    }
}

我的html是这样的。

<div class="navbar bg-dark pt-3 pb-0 pl-4 pr-0 fixed-top">
    <div class="navbar-brand float-left">
        <a href="#"><img src="assets/img/logo.png"></a>
    </div>
    <div class="float-right mr-4 menu-bar">
        <a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
        <a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
        <a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
        <a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
    </div>
    <div class="dropdown-btn">
        <div class="menu_btn" onclick="myFunction(this)">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
        </div>
        <div id="myDropdown" class="dropdown-content">
            <a href="#about"><span class="a-border" onclick="menuclick(this)">ABOUT US</span></a>
            <a href="#creater"><span class="a-border" onclick="menuclick(this)">CREATERS</span></a>
            <a href="#news"><span class="a-border" onclick="menuclick(this)">NEWS</span></a>
            <a href="#contact"><span class="a-border" onclick="menuclick(this)">CONTACT</span></a>
        </div>
    </div>
</div>

而 css 就是这样。

a {
    text-decoration: none;
}
a:hover {
    cursor: pointer;
}
.a-border {
    display: inline-block;
    position: relative;
    color: white;
    padding: 0.5rem 0.25rem;
    margin: 0 1.5rem;
    overflow: hidden;
}
.a-border::after {
    content: url("../img/more-btn-bottom.png");
    display: block;
    position: absolute;
    bottom: 0;
    left: -0.25rem;
    border: none;
    transform: scale(0,1);
    transform-origin: 0% 100%;
    transition: transform 0.4s;
}
a:hover .a-border::after {
    transform:scale(1,1);
}
a.focused .a-border::after {
    transform: none;
}
.banner {
    position: relative;
    z-index: 2;
}
.menu-bar {
    z-index: 3;
}
.menu-btn {
  display: inline-block;
  cursor: pointer;
  z-index: 3;
}

.bar1,.bar2,.bar3 {
  width: 35px;
  height: 5px;
  background-color: #fff;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px,6px);
  transform: rotate(-45deg) translate(-9px,6px);
}

.change .bar2 {opacity: 0;}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px,-8px);
  transform: rotate(45deg) translate(-8px,-8px);
}

.dropdown-btn {
  position: relative;
  display: inline-block;
  z-index: 3;
}

.dropdown-content {
  display: none;
  position: absolute;
  right: 20px;
  background-color: #343a40;
  min-width: 160px;
  overflow: auto;
  box-shadow: 0px 8px 16px 0px rgba(0,0.2);
  z-index: 1000;
}

.show {display: block;}
@media screen and (min-width: 780px) {
    .menu-bar {
        display: block;
    }
    .dropdown-btn {
        display: none;
    }
}
@media screen and (max-width: 779px){
    .menu-bar {
        display: none;
    }
    .dropdown-btn {
        display: block;
    }
}

如果你试试这个代码，你会发现当你点击一次窗口时，按钮不起作用。 当我单击窗口一次时，当我单击按钮两次时会显示下拉列表。 我想解决这个问题。 我想你知道的比我多，所以我希望有人能解决这个问题。

解决方法

您可以将 event.stopPropagation 添加到菜单按钮单击中。

<div class="menu_btn" onclick="event.stopPropagation(); myFunction(this)">

这样当您点击按钮时，您就不会同时点击下面的窗口。

,

我已经通过编辑 myfunction 解决了这个问题。 我的代码如下。

function myFunction(x) {
    x.classList.toggle("change");
    document.getElementById("myDropdown").classList.toggle("show");
    flag=0;
}

感谢您的帮助。