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像素宽但保持site-nav ul可见时，我想要隐藏切换按钮和切换功能。我一直试图通过这个代码结合上面的代码来做到这一点，并且不知何故它只是不起作用。

$(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。

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

1 个答案: