javascript - 在外部单击时，CSS 动画按钮不会设置动画

Question

我有一个按钮可以触发导航菜单打开(位于右上角)。当您打开菜单(通过单击按钮)时，它会按预期工作 - 菜单打开并且按钮动画。

当您再次单击该图标时，它也会起作用 - 然后它会关闭菜单并使图标动画回到其初始位置。

但是当您打开菜单并在图标区域外单击时，它会关闭菜单但图标不会动画。

当在外部进行点击时，如何让图标动画回到初始位置？

这是 fiddle

这是脚本:

 $(function() {
   var btn = $('#btn');
   menu = $('nav ul');
   menuHeight = menu.height();

   $(btn).on('click', function(e) {
    e.preventDefault();
    menu.slideToggle();
   });

   $('html').on("click touchstart", function() {
    menu.slideUp();
   });

   $('.nav-wrapper').on("click touchstart", function(event){
     event.stopPropagation();
   });

   $( "#nav-toggle" ).on( "click", function() {
     $( this ).toggleClass( "active" );
   }); 
}

Answer 1

只需将此添加到您的 JS 中:Fiddle

$('html').on("click touchstart", function() {
    menu.slideUp();
    $('#nav-toggle').removeClass('active');
});