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');
});