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 .