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

单击外部时，CSS动画按钮不会动画

1 个答案: