jquery Help - Expanded menuモバイルが1ページのWebページのメニュー選択を閉じない

Question

私のページのモバイルビューでは、メニューオプションが選択されると、それがドロップされ、拡張されたクラス値が追加されます。その値は、メニュー要素をクリックすると決して削除されません。メニュー内のアイテムがクリックされたときに、拡張されたクラス値を削除し、拡張されたメニューを削除する必要があります。これは、1ページのサイトのページ全体をカバーするためです。

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.