JavaScript 切换显示/隐藏响应菜单

Question

我一直被这个特殊问题所困扰。我想在我正在处理的网站上使用移动宽度的切换菜单。基本上，它运行良好，我可以在 CodePen 上向您展示。

使用 JavaScript 通过切换按钮显示/隐藏菜单的代码如下所示。

$(document).ready(function() {

  //Menu Open Seasame Action    
  $('.site-nav-btn').click(function() {
  $('.site-nav ul').slideToggle('fast');
  $(this).find('span:hidden').show().siblings().hide();
});

  //Hide site-nav content.    
  $(".site-nav ul").hide();
});

我的问题是，当宽度超过 480 像素宽但保持站点导航可见时，我想隐藏切换按钮和切换功能。我一直在尝试通过此代码与上述代码相结合来做到这一点，但不知何故它不起作用。

$(function() {
  if ($(window).width() > 480) {
      $('.site-nav-btn').css('display','none');
      $('.site-nav ul').show();
      }
  else {
      $('.site-nav-btn').css('display','block');
      $('.site-nav ul').hide();
      }
  });

我对 JavaScript 不是很精通，所以如果有人能指出为什么它不能与真正有用的解决方案一起工作的话。

Answer 1

将您的检查功能附加到$(window).resize() 并修复选择器。见this fork of your CodePen。