切换显示/隐藏响应菜单

JavaScript Toggle Show/Hide Responsive Menu

本文关键字：响应 菜单 隐藏 显示      更新时间：2023-09-26

我一直被这个问题难住了。我想使用我正在工作的网站上的移动宽度切换菜单。基本上，它工作得很好，我可以在这个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，所以如果有人能指出为什么它不能与解决方案一起工作，这将是真正有帮助的。

将检查功能附加到$(window).resize()并修复选择器。

相关文章：