移动设备：点击菜单链接后隐藏菜单

Question

header.php

       <div class="mobile-menu">
          <a href="#" class="mobile"><i class="fas fa-bars"></i></a>
      </div>
          <div class="site-nav">
              <ul>
              <?php 
                  // navigation menu
                    wp_nav_menu(array(
                    'theme_location' => 'primary',
                    'menu_class' => 'primary-menu',
                    'container' => false,
                    'items_wrap' => '%3$s'
                      ));

                    ?>
  </ul>
</div>

将此视为

 .site-nav ul li a

JS

 jQuery(document).ready(function(){
     jQuery(window).load(function() { //execute after load
//responsive menu
    jQuery('.mobile').on('click',function() {
        jQuery('.site-nav').slideToggle('slow');

});
//fix menu when changing to mobile to desktop
var breakpoint = 767;
jQuery(window).resize(function(){

    if (jQuery(document).width() >= breakpoint){
        jQuery('.site-nav').show();
    }else{
        jQuery('.site-nav').hide();
    }
    });
    });
});

当我单击其他页面链接时如何隐藏菜单页面，每次我单击其他页面时，菜单都不会隐藏/切换

http://jsfiddle.net/jayllopy/vds2U/217/