jquery帮助 - 扩展的菜单移动不关闭我的单页网站菜单选择

Question

在我的页面的移动视图中，当选择菜单选项时，它下降并添加扩展的类值。一旦我点击菜单元素，该值永远不会被删除。当点击菜单中的任何项目时，我需要删除展开的类别值，并移除展开的菜单，因为它覆盖了我的一个页面网站的整个页面。

check in mobile view.

<nav class="top-bar" data-topbar="" style="position: fixed; top: 0px;"> 
    . 
    . 
    . 
</nav> 


<script type="text/javascript"> 

    $(document).ready(function() { 
    $(document).click(function (event) { 
     var clickover = $(event.target); 
     var _opened = $(".expanded").hasClass("expanded in"); 
     if (_opened === true && !clickover.hasClass("navbar-toggle")) { 
      $("button.navbar-toggle").click(); 
     } 
    }); 
}); 

</script> 

Answer 1

你可以这样做这个。

您可以通过检查该类是否存在，从每个菜单项的“顶部栏”中删除该“扩展”类。

$(".top-bar-section ul li > a").click(function() { 
    if($('.top-bar').hasClass('expanded')){ 
     $('.top-bar').removeClass('expanded') 
    } 
}); 

Answer 2

使用$('#menuContent').toggleClass('expanded')菜单按钮被点击时，和$('#menuContent').removeClass('expanded')单击菜单项时，就像这样：

$(document).ready(function() { 

    $('#menuButton').click(function(event) { 
     $('#menuContent').toggleClass('expanded'); 
    }); 

    $('.menuItem').click(function(event) { 
     $('#menuContent').removeClass('expanded'); 
    }); 

}); 

Here is a fully functional JSFiddle to demonstrate.