如何指定要为我的菜单打开的切换按钮？ [关闭]

Question

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

编辑：我要做的是通过单击切换按钮打开导航，然后启用切换动画。现在，切换按钮有效，但是当我单击按钮时我的导航没有打开。我的导航打开的唯一时间是当我单击切换按钮周围的周围区域（空白区域）时。

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

这是 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() { ... });

Answer 2

尝试在点击事件后添加#menu-target：

$('.menu-icon-container').on('click', function(event) {
    $("#menu-toggle").classList.toggle('menu-toggle-active');
});