Javascript 媒体查询中的导航栏问题

当我的页面通过媒体查询进行移动调整时，我会显示一个

菜单栏（句柄）

，允许用户

单击
和
滑动切换导航栏，以便他们可以看到它

当我手动调整页面大小时，我注意到以下问题：

当我在移动视图中时，导航栏是可见的，当我调整它的大小时，导航栏是可见的。但是，如果我在移动视图中关闭导航栏，然后调整到全屏，我的导航栏就会消失，我不知道为什么。我相信我的jQuery有问题。谁能给我指出正确的方向吗


$（文档）.ready（函数（）{
变量句柄=$（“.handle”）；
变量导航=$（“.navigation”）；
句柄。单击（函数（）{
navigation.slideToggle（）；
});
});
nav-ul{
背景色：#43a286；
溢出：隐藏；
颜色：白色；
填充：0；
文本对齐：居中；
保证金：0；
}
nav ul li:悬停{
背景色：#399077；
过渡：0.5s；
}
李国荣{
显示：内联块；
填充：20px；
}
.处理{
宽度：100%；
背景#005c48；
文本对齐：左对齐；
框大小：边框框；
填充：15px；
颜色：白色；
显示：无；
}
.手柄i{
浮动：对；
光标：指针；
}
@媒体屏幕和屏幕（最大宽度：400px）{
李国荣{
框大小：边框框；
宽度：100%；
显示：块；
填充：15px；
文本对齐：左对齐；
盒影：1px 1px#399077；
}
.处理{
显示：块；
}
}

菜单


单击
手柄后，如果滑动切换导航菜单，则导航菜单现在处于隐藏状态。如果您将调整窗口大小（在导航隐藏后）-它仍将隐藏（因为您没有再次显示它）

调整窗口大小后，您可以使用运行任何其他功能（请注意，您需要检查
调整大小
是否用于缩小或放大窗口，然后需要检查导航是否可见，然后显示（如果隐藏）.
切换回桌面视图后，您需要将导航从隐藏重置为可见，否则如果导航被隐藏，它将保持隐藏。您可以通过
resize（）
功能执行此操作：

$(document).ready(mobileNav);
$(window).on('resize', mobileNav);

function mobileNav() {
  var handle = $(".handle");
  var navigation = $(".navigation");
  if (window.innerWidth <= 400) {
    navigation.hide();
  } else {
    navigation.show();
  }
  handle.unbind().click(function() {
    navigation.slideToggle();
  });
}


菜单






这里有两个函数我不懂。你能解释一下它们的作用吗？
$（窗口）。在（'resize'，mobileNav）；
handle.unbind（）
@VeeshaDawg有关详细信息，请参阅和。