Question

我有一个移动菜单，显示窗口低于736px时。此菜单上有一个javascript切换，可添加CSS类以动画移入菜单。

当我重新调整窗口大小，然后打开和关闭移动菜单时，它工作正常，当窗口随后再次调整大小后，当窗口到达CSS时，下拉移动菜单会闪烁一秒媒体查询断点再次（736px）。

如果有人能帮助我，我会非常感激。

**注意我需要动画菜单，所以我不能只删除mobileMenuActive类。

codepen：https://codepen.io/emilychews/pen/POeGaN

JS

var mobileMenuButton = document.getElementById("mobile-menu-button")
var mobileMenuItems = document.getElementById("nav-menu-items")

// TOGGLE MOBILE MENU
var mobileMenu = false

function toggleMobileMenu() {

    if (mobileMenu === false) {

      mobileMenuItems.classList.remove("mobileMenuInactive")
      mobileMenuItems.classList.add("mobileMenuActive")
      mobileMenuButton.innerHTML = "Close"
      mobileMenu = true

    } else {

      mobileMenuItems.classList.add("mobileMenuInactive")
      mobileMenuItems.classList.remove("mobileMenuActive")
      mobileMenuButton.innerHTML = "Menu"
      mobileMenu = false

    }
}

mobileMenuButton.addEventListener("click", function() {
    toggleMobileMenu()
}, false)

CSS

body, ul {padding: 0; margin: 0}

/* --- DESKTOP MENU STYLING  ---*/

#main-header {width: 100%; height: 100px;}

#mobile-menu-button {display: none;}

#main-navigation {
  position: relative;
  width: 100%;
  height: 100px;
  background: red;
  display: flex;
  justify-content: space-between;
  box-sizing: border-box;
  padding: 10px 5% 10px 5%;
  align-items: center;
}

ul#nav-menu-items {
  display: flex;
  margin-left: auto;
}

#main-navigation ul li {list-style-type: none;}

ul#nav-menu-items li a {
  padding: 10px 15px;
  margin: 0 5px;
  box-sizing: border-box;
  background: yellow;
  text-decoration: none;
  color:#000;
}

#main-navigation ul#nav-menu-items li a:hover {
  color:blue;
  transition: color .25s;
}

/* --- MOBILE MENU AND DROPDOWN  ---*/

@media screen and (max-width : 736px) {

  #main-navigation {justify-content: flex-end;}

  #mobile-menu-button {
    display: flex;
    justify-content: center;
    background: blue;
    color: white;
    padding: 10px 15px;
    min-width: 75px;
    cursor: pointer;}

/*   dropdown mobile menu */
  ul#nav-menu-items {
    opacity: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-width: 150px;
    background: blue;
    position: absolute;
    right: 5%;
    top: 100px;
    padding: 10px 0px;
  }

  ul#nav-menu-items li {
    padding: 10px 10px;
  }

  ul#nav-menu-items li a {
    padding: 10px 15px;
    color: white;
    background: transparent;
  }

  ul#nav-menu-items li a:hover {
    color: lightblue;
  }

/* -------- MOBILE CLASSES ADDED WITH JavaScript*/

#nav-menu-items.mobileMenuActive {
  animation: showMobileMenu .5s ease-in forwards;
}

@keyframes showMobileMenu {
  0% {opacity: 0;}
  100% {opacity: 1;}
}

#nav-menu-items.mobileMenuInactive {
  animation: removeMobileMenu .5s ease-out forwards;
}

@keyframes removeMobileMenu {
  0% {opacity: 1;}
  100% {opacity: 0;}
}

} /*END OF MOBILE MENU STYLING*/

HTML

<header id="main-header">
  <nav id="main-navigation"> 
    <ul id="nav-menu-items">
      <li class="menu-item menu-item-1"><a href="https://www.google.com">News</a></li>
      <li class="menu-item menu-item-2"><a href="https://www.google.com">About</a></li>
      <li class="menu-item menu-item-3"><a href="https://www.google.com">Contact</a></li>
    </ul>

<!-- button for triggering mobile nav -->
    <div id="mobile-menu-button">Menu</div>

  </nav>
</header>

Answer 1

选项可以是使用窗口resize事件并删除mobileMenuInactive类。然后当您单击＆＃34;菜单＆＃34;。

时，您的代码会再次添加它

window.addEventListener('resize', function(){
    mobileMenuItems.classList.remove("mobileMenuInactive");
});

Answer 2

试试这个JS代码

    var mobileMenuButton = document.getElementById("mobile-menu-button")
    var mobileMenuItems = document.getElementById("nav-menu-items")

    // TOGGLE MOBILE MENU
    var mobileMenu = false

    function toggleMobileMenu() {

        if (mobileMenu === false) {
            mobileMenuItems.classList.add("mobileMenuActive")
            mobileMenuButton.innerHTML = "Close"
            mobileMenu = true
        } else {
            mobileMenuItems.classList.remove("mobileMenuActive")
            mobileMenuButton.innerHTML = "Menu"
            mobileMenu = false
        }

    }

    mobileMenuButton.addEventListener("click", function() {
        toggleMobileMenu()
    }, false)

CSS动画类使用JS时闪烁

2 个答案: