1

只有在另一个菜单（移动导航）上的转换完成后，我才使用“addEventListener”打开菜单（流派容器）。问题是，一旦一切都关闭并且我尝试重新激活移动导航，即使我没有点击流派容器，“addEventListener”似乎也会触发。我想要的是当我关闭移动导航时一切重新开始。

function menu() {

  var y = document.getElementById('genres-container');
  var x = document.getElementById('mobile-nav');

  // If genres-container is open, close it.
  if (y.className === 'nav-active') {
    y.className = 'nav-disabled';
    x.className = 'nav-disabled';
  }

  // Else, open or close mobile-nav.
  else {
    if (x.className === 'nav-disabled') {
      x.className = 'nav-active';
    } else {
      x.className = 'nav-disabled';
    }
  }
}

function genres() {

  var x = document.getElementById('mobile-nav');
  var y = document.getElementById('genres-container');

  // If mobile-nav is open, close it.
  if (x.className === 'nav-active') {
    x.className = 'nav-disabled';

    //Wait for transition to be over.
    let element = document.getElementById("mobile-nav");
    element.addEventListener("transitionend", function(event) {

      // If genres-container is closed, open it.
      if (y.className === 'nav-disabled') {
        y.className = 'nav-active';
      }

      // Else, close it.
      else {
        y.className = 'nav-disabled';
      }
    }, false);
  }
}
.nav-disabled {
  max-height: 0;
  overflow: hidden;
}

.nav-active {
  max-height: 150px;
  overflow: hidden
}

#mobile-nav {
  transition: max-height ease .4s;
}

#genres-container {
  transition: max-height ease .4s;
}
<a class="nav-link" onclick="menu()">menu</a>
<div id="mobile-nav" class="nav-disabled">
  <a class="nav-link" onclick="genres()">genres</a>
</div>
<div id="genres-container" class="nav-disabled">
  genres menu
</div>

4

1 回答 1

0

您需要将eventListenerfor移到函数transitionend之外。onClick否则，将多次添加事件监听器。

 var x = document.getElementById('mobile-nav');
  var y = document.getElementById('genres-container');
 var isMenuTransition = false;
function menu() {
   isMenuTransition = true;


  // If genres-container is open, close it.
  if (y.className === 'nav-active') {
    y.className = 'nav-disabled';
    x.className = 'nav-disabled';
  }

  // Else, open or close mobile-nav.
  else {
    if (x.className === 'nav-disabled') {
      x.className = 'nav-active';
    } else {
      x.className = 'nav-disabled';
    }
  }
}
let element = document.getElementById("mobile-nav");
    element.addEventListener("transitionend", function(event) {
      if(!isMenuTransition){
      // If genres-container is closed, open it.
      if (y.className === 'nav-disabled') {
        y.className = 'nav-active';
      }

      // Else, close it.
      else {
        y.className = 'nav-disabled';
      }
      } else {
        isMenuTransition = false;
      }
    }, false);

function genres() {

 

  // If mobile-nav is open, close it.
  if (x.className === 'nav-active') {
    x.className = 'nav-disabled';

    //Wait for transition to be over.
    }
}
.nav-disabled {
  max-height: 0;
  overflow: hidden;
}

.nav-active {
  max-height: 150px;
  overflow: hidden
}

#mobile-nav {
  transition: max-height ease .4s;
}

#genres-container {
  transition: max-height ease .4s;
}
<a class="nav-link" onclick="menu()">menu</a>
<div id="mobile-nav" class="nav-disabled">
  <a class="nav-link" onclick="genres()">genres</a>
</div>
<div id="genres-container" class="nav-disabled">
  genres menu
</div>

于 2018-07-16T15:16:15.633 回答