Question

我有一个显示offcan的侧边菜单。单击按钮时，画布向左推并打开菜单。我希望菜单折叠，并且在选择链接时不会保持打开状态。

这是HTMl：

<header>
        <nav class="menu" id="theMenu" ng-controller="MenuCtrl">
          <div class="menu-wrap">
            <a ng-href="/"><img src="/images/zj-logo.png" alt="Zach Janice" class="logo"></a>
            <i class="fa fa-times menu-close"></i>
            <a ng-href="/">Home</a>
            <a ng-href="#/about">About</a>
            <a ng-href="#/projects">Projects</a>
            <a ng-href="#/services">Services</a>
            <a ng-href="#/contact">Contact</a>
          </div><!-- menu-wrap -->
          <div id="menuToggle" class="active">
            <i class="fa fa-bars"></i>
          </div><!-- menuToggle -->
        </nav>
      </header>

jQuery的：

(function(jQuery){

            // Menu settings
            jQuery('#menuToggle, .menu-close').on('click', function(){
                jQuery('#menuToggle').toggleClass('active');
                jQuery('body').toggleClass('body-push-toleft');
                jQuery('#theMenu').toggleClass('menu-open');
            });


        })(jQuery);

非常感谢任何帮助。提前谢谢。

-Z

Answer 1

由于您正在使用toggleClass，因此您只需将.menu-wrap a添加到您的选择器，该选择器应在点击时将其关闭。除非添加了类，否则链接不会在视图中显示，因此您不会获得任何错误点击。

jQuery('#menuToggle, .menu-close', '.menu-wrap a').on('click', function(){
    jQuery('#menuToggle').toggleClass('active');
    jQuery('body').toggleClass('body-push-toleft');
    jQuery('#theMenu').toggleClass('menu-open');
});

选择链接时关闭Bootstrap菜单

1 个答案: