Question

我正在使用简单的SPA并使用html模板。模板有移动导航，但当我使用angularjs的路线时，移动导航不关闭。那么，如何在点击后隐藏导航。

这是Jquery代码。

注意：导航有一个子菜单。

  $('.nav-menu').superfish({
    animation: {
      opacity: 'show'
    },
    speed: 400
  });

  // Mobile Navigation
  if ($('#nav-menu-container').length) {
    var $mobile_nav = $('#nav-menu-container').clone().prop({
      id: 'mobile-nav'
    });
    $mobile_nav.find('> ul').attr({
      'class': '',
      'id': ''
    });
    $('body').append($mobile_nav);
    $('body').prepend('<button type="button" id="mobile-nav-toggle"><i class="fa fa-bars"></i></button>');
    $('body').append('<div id="mobile-body-overly"></div>');
    $('#mobile-nav').find('.menu-has-children').prepend('<i class="fa fa-chevron-down"></i>');

    $(document).on('click', '.menu-has-children i', function(e) {
      $(this).next().toggleClass('menu-item-active');
      $(this).nextAll('ul').eq(0).slideToggle();
      $(this).toggleClass("fa-chevron-up fa-chevron-down");
    });

    $(document).on('click', '#mobile-nav-toggle', function(e) {
      $('body').toggleClass('mobile-nav-active');
      $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
      $('#mobile-body-overly').toggle();
    });

    $(document).click(function(e) {
      var container = $("#mobile-nav, #mobile-nav-toggle");
      if (!container.is(e.target) && container.has(e.target).length === 0) {
        if ($('body').hasClass('mobile-nav-active')) {
          $('body').removeClass('mobile-nav-active');
          $('#mobile-nav-toggle i').toggleClass('fa-times fa-bars');
          $('#mobile-body-overly').fadeOut();
        }
      }
    });
  } else if ($("#mobile-nav, #mobile-nav-toggle").length) {
    $("#mobile-nav, #mobile-nav-toggle").hide();
  }

Answer 1

在NavCtrl

中创建变量

$scope.showNav = false

其值将在点击

上切换

ng-click="showNav=!showNav" .

现在将此变量放在ng-show内，如

<nav-menu> 
   <nav-buttons ng-repeat="item in menuItems" ng-click="showNav=!showNav" ng-show="showNav">
     <!-- other child DOMs -->
   </nav-buttons>
</nav-menu>

如果你想要更好的动画等，你需要做更多的事情。您可以参考ui.bootstrap

Angularjs切换移动导航菜单未关闭

1 个答案: