我有一个显示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
答案 0 :(得分:2)
由于您正在使用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');
});