Javascript 调整大小后取消模拟导航栏

我的项目站点上有响应导航栏。当屏幕宽度低于968px时，汉堡包菜单具有滑动菜单。但当我再次调整屏幕大小时（这样“正常”的宽导航栏应该再次出现），导航栏消失了

我认为这与main.JS文件中的JS函数有点冲突。以下是它的内容：

$(document).on('click', 'a[href^="#"]', function (event) {
  event.preventDefault();
  $('html, body').animate({
    scrollTop: $($.attr(this, 'href')).offset().top
  }, 1400);
});

$(document).ready(function(){
  $(".hamburger").on('click', function(event) {
    event.preventDefault();
    $(".navigation-list").toggle();
  });
});

所以我在JS文件中有两个函数。单击“锚定”时，首先生成滑动效果。第二个菜单在单击时显示/隐藏汉堡菜单。 那么为什么navbar会消失呢

以下是链接：

---

我认识到这是因为toggle（）函数。

通过添加另一个类，比如说

hide

，您可以使用

toggleClass（'hide'）

$（文档）.ready（函数（）{
$（“.hamburger”）。在（'click'，函数（事件）{
event.preventDefault（）；
$（“.navigation list”）.toggleClass（'hide'）；
});
});
.topbar{
位置：固定；
排名：0；
左：0；
右：0；
z指数：1；
}
.导航列表{
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
列表样式：无；
最大高度：300px；/*此处*/
溢出：隐藏；/*此处*/
过渡：所有0.3线性；/*此处*/
}
.navigation-list.hide{/*此处*/
最大高度：0px；
溢出：隐藏；
过渡：所有0.3s线性；
}
.navigation-list-item.hover{
填充：10px；
弹性：1；
背景：#a6b9cd；
列表样式：无；
字体系列：“开放式Sans”，无衬线；
}
.中心标志{
显示：无；
}
.导航列表项目a{
颜色：#363636；
文字装饰：无；
字号：1em；
}
.navigation-list-item.hover{
过渡：0.1s线性；
}
.导航列表项。悬停：悬停{
背景：#f8f8ff；
}
.汉堡包容器{
文本对齐：居中；
字号：2em；
背景色：#a6b9cd；
}
.汉堡包：悬停{
光标：指针；
}
@媒体屏幕和屏幕（最小宽度：968px）{
.汉堡包容器{
显示：无；
}
.导航列表{
显示：未设置；
显示器：flex；
弯曲方向：行；
证明内容：之间的空间；
文本对齐：居中；
线高：70px；
高度：70像素；
空白：nowrap；
}
.navigation-list.hide{/*此处*/
最大高度：100px；
}
.导航列表项{
弹性：1；
背景：#a6b9cd；
列表样式：无；
字体系列：“开放式Sans”，无衬线；
}
.导航列表项目a{
文字装饰：无；
字号：1em；
}
.中心标志{
填充：0；
显示：未设置；
弹性：1；
宽度：100px；
背景：#a6b9cd；
边框：5px实心#a6b9cd；
边界半径：50%；
}
.navigation-list-item.hover{
填充：0；
过渡：0.3s线性；
}
.汉堡包：悬停{
光标：指针；
}
}










使用相关的html、css代码创建一个演示/代码片段显示调整大小功能…很好。。向我们展示一些带有
navbar
的代码，然后用jsfiddle代码更新了第一篇文章。很酷的解决方案。当点击“汉堡包”并且菜单向上滑动时，是否可以添加一些过渡？我试着使用slideToggle（），但它有问题。@icelandico你可以用css
max height
而不是
display:none。。请参阅更新的演示