Javascript 响应灵活的菜单

我使用flexbox创建了一个带有简单触发器的响应菜单，但遇到了一个问题。在一次媒体查询中，我将

UL

放在

div

下方，该div包含

徽标和
触发器
，并将其更改为
显示：无
，直到单击触发器

当我试图为它的打开状态设置
UL
样式时，当我给它边距和填充时，它增加了
nav
的整体大小，这样你就可以知道有东西隐藏了。既然元素是隐藏的，在打开状态被触发之前，边距和填充不应该没有效果吗

我找到了一个解决办法，在
LI
中添加边距和填充，但我觉得这是个骗局


$（函数（）{
$（'.trigger'）。单击（函数（）{
$（'.mainNav'）.toggleClass（'show'）；
});
});
*{
保证金：0；
填充：0；
列表样式类型：无；
}
身体{
字号：17px；
颜色：白色；
}
导航{
身高：100%；
宽度：100%；
背景色：#333；
}
.导航固定宽度{
身高：继承；
最小高度：70px；
宽度：960px；
保证金：0自动；
显示器：flex；
柔性流：行；
}
.标志和触发器{
显示器：flex；
证明内容：之间的空间；
}
.标志{
内容：''；
高度：50px；
宽度：50px；
背景色：#f1f1；
位置：相对位置；
利润率：8px0；
}
.扳机{
内容：''；
高度：50px；
宽度：50px；
背景色：#f1f1；
显示：无；
位置：相对位置；
利润率：8px0；
}
mainNav先生{
显示器：flex；
宽度：200px；
证明内容：之间的空间；
利润率：20px 0px；
左边距：自动；
溢出：隐藏；
过渡：最大高度。3秒轻松；
}
@媒体屏幕和屏幕（最大宽度：960像素）{
.导航固定宽度{
宽度：100vw；
}
}
@媒体屏幕和屏幕（最大宽度：900px）{
.导航固定宽度{
柔性流动：柱；
}
mainNav先生{
保证金：0；
宽度：100%；
显示：块；
最大高度：0；
}
李美娜先生{
利润率：20px；
填充：20px；
左边距：0；
宽度：100%；
左侧填充：0；
}
.表演{
最大高度：20em；
}
.扳机{
显示器：flex；
}
}


链接1
链接2
链接3

我认为当您使用“$（'.mainNav'）.toggleClass（'show'）；”时，您不会将UL更改为display:none，因此即使未单击触发器，页面上也会为UL分配空间。这就是为什么你们可以在UL元素上看到边距和填充

如果您想保持toggleClass，可以在CSS类上应用边距和填充。show

或者，如果您想在UL上添加边距和填充，则必须使用$（'.mainNav'）.css（{'display'：'block'}）和$（'.mainNav'）.css（{'display'：'none'}），并且不使用toggleClass
 “因为元素是隐藏的”-它不是，您只是给它一个最大高度0。