当选择链接时关闭引导菜单

Close Bootstrap Menu when a Link is selected

本文关键字：菜单 选择 链接      更新时间：2023-09-26

我有一个侧菜单显示画布。当您单击按钮时，画布将向左转并打开菜单。我希望菜单折叠，而不是保持打开，当一个链接被选中。

这是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

既然您使用的是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');
});
相关文章：