'addEventListener' 仅点击

Question

只有在另一个菜单 (mobile-nav) 上的转换完成后，我才使用 'addEventListener' 打开一个菜单 (genres-container)。问题是，一旦一切都关闭并且我尝试重新激活 mobile-nav，'addEventListener' 似乎会触发，即使我没有点击 genres-container。我想要的是当我关闭 mobile-nav 时一切都重新开始。

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

您需要将 transitionend 的 eventListener 移到 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>

'addEventListener' 仅点击

'addEventListener' only onclick

javascript

html

css

css-transitions

transitionend