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

Question

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

在移动视图中签到。

    <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');
    });
});

下面是一个功能齐全的 JSFiddle 来演示。