'addEventListener'仅onclick

Question

仅在完成另一个菜单（移动导航）的转换后，我才使用“ addEventListener”打开菜单（流派容器）。问题是，一旦所有内容都关闭并且我尝试重新激活mobile-nav，即使我没有单击genres-container，“ 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>

Answer 1

您需要将Start-Service filebeat的{​​{1}}移动到eventListener函数之外。否则，事件监听器将被添加多次。

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.
    }
}