javascript - 如何指定打开菜单的切换按钮？

Question

我试图在您单击切换按钮 ( http://international-aset.com/intaset/ ) 时打开我的移动导航；然而，由于某种原因，当您单击按钮本身时它不起作用，但当您单击按钮的周围区域时它起作用。

编辑:我想做的是通过单击切换按钮打开导航，然后启用切换动画。现在，切换按钮可以工作，但当我单击该按钮时，我的导航不会打开。我的导航打开的唯一一次是当我单击切换按钮周围的周围区域(空白区域)时。

我希望这更有意义，如果没有，请告诉我，我会尽力说得更清楚。

这是 HTML 代码:

<label for="toggle">
  <div class="menu-icon-container">
    <a href="#" class="menu-toggle" id="menu-toggle"><span></span></a>
  </div>
</label>

这是 JS:

<script type="text/javascript">
  $( document ).ready( function( $ ) {
    $('.menu-icon-container').on('click', function(event) {
      document.getElementById('menu-toggle').addEventListener('click', function() {
        this.classList.toggle('menu-toggle-active');
      });
    });
  });
</script>

感谢您的帮助!

Answer 1

您可能只想要这个:

$('#menu-toggle').click(function() {
    $(this).toggleClass('menu-toggle-active');
});

如果您的元素在页面加载时不存在，您才真正需要 on() 。如果您确实需要它，请执行以下操作:

$(document).on('click', '#menu-toggle', function() { ... });