Question

我有一个移动菜单，当点击汉堡包时，该菜单当前会从视口的右边缘打开。但随后点击汉堡包什么也没做。应该将菜单设置为关闭位置的动画。我已经尝试了以下许多变体而没有成功。

$('#menu-wrap').prepend('<div id="menu-trigger"><i class="fa fa-bars fa-2x"></i></div>');
$("#menu-trigger").on("click", function(){
    $('this').addClass('opened');
    $('#menu').animate({ width:'220' }, 500).css('padding', '40px');        
});
$("#menu-trigger.opened").on("click", function(){
    $('this').removeClass('opened');
    $('#menu').animate({ width:'0' }, 500).css('padding', '0px');
});

我已经确认＃menu-trigger确实收到了已打开的课程，但在第一次点击后它没有响应。

Answer 1

两个点击事件仍然会触发，因为你没有告诉第一个不以任何方式触发。这可能会导致真正发生的问题。

考虑将代码重写为更清晰的代码，如下所示：

$("#menu-trigger").on("click", function(){
  if($(this).hasClass('opened'){
    $(this).removeClass('opened');
    $('#menu').animate({ width:'0' }, 500).css('padding', '0px');
  } else {
    $(this).addClass('opened');
    $('#menu').animate({ width:'220' }, 500).css('padding', '40px');        
  }
});

此外，$('this')和$(this)不一样 - 前者将在DOM中查找标记名为this的元素（如<this></this>），这不是什么你想要的。

$("#menu-trigger").on("click", function() {
  if ($(this).hasClass('opened')) {
    $(this).removeClass('opened');
    $('#menu').animate({
      width: '0'
    }, 500).css('padding', '0px');
  } else {
    $(this).addClass('opened');
    $('#menu').animate({
      width: '220'
    }, 500).css('padding', '40px');
  }
});

#menu-trigger {color: red}
#menu-trigger.opened {color: green}
#menu {border: 1px solid black; display: inline-block}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="menu-trigger">Menu trigger</button><br>
<div id="menu">Menu</div>

jquery动画菜单打开但不会关闭

1 个答案: