Javascript 使用jQuery动画而不显示：块

我正在尝试使用

.slideToggle（）

将一个div与

display:none

切换到

display:grid

。但是，这个动画似乎将

display:block

内联添加到html中，并覆盖任何其他css类

CSS

jQuery

$('#nav-toggle').click(function() {
    $('.nav-menu').slideToggle(500, function() {
        $(this).toggleClass('grid')
    });
});

我在使用上取得了一些短暂的成功

$（“#导航切换”）。单击（函数（）{
$（'.nav menu'）。滑动切换（500，函数（）{
如果（$（this）.is（':visible'））{
$（this.css（'display'，'grid'）；
}
});
});
.nav菜单{
显示：无；
网格模板列：重复（3，1fr）；
}

切换
项目1
项目2
项目3
解决方案是将导航菜单设置为
显示：网格并使用JQuery隐藏和显示它。顺便说一句，如果你有一个用户禁用了JavaScript，他仍然可以阅读你的页面

请尝试以下代码：


$（'.nav菜单'）.hide（）；//比无显示更清晰
$（“#导航切换”）。单击（函数（）{
$（'.nav menu'）。滑动切换（500，函数（）{
如果（$（this）.is（':visible'））{
$（this）.show（）；//比显示上一个（此处为网格）更清晰
}
});
});
.nav菜单{
显示：网格；
网格模板列：重复（3，1fr）；
}

切换
项目1
项目2
项目3
因此，为了使响应性CSS媒体查询更干净、更容易，我最终将
nav
元素包装在一个div中，并在
display:none
和
display:block
之间切换div

我仍然能够在中对齐菜单项，因为块的子项是保持网格属性的
nav
。同样在我的例子中，这个块是更复杂的
display:grid
布局的子块，但由于它仍然是子块，我仍然可以在它上面使用CSS网格属性，我只需要使用旧的CSS方法来扩展和居中块

它不是很干净，但我想这是我能做的最好的了，直到jQuery被更新为支持不仅仅是动画的
display:block


$（“#导航切换”）。单击（函数（）{
$（'.nav菜单容器'）。滑动切换（500，函数（）{
if（$（this.css（'display'）=='none'）{
$（this.css（'display'，''）；
}
});
});
.nav菜单容器{
显示：无；
}
.导航菜单{
显示：网格；
网格模板列：重复（3，1fr）；
}

切换
项目1
项目2
项目3
谢谢。嗯，这真的让响应性网页的实现变得很痛苦，我想我会寻找其他方式来显示我的菜单。@myol您可能想使用类似引导的框架来帮助您。此外，这解决了你的问题吗？如果是，请投票并接受：它本身并没有解决我的问题，但自从你花时间回答后，我还是投了更高的票。
$('#nav-toggle').click(function() {
    $('.nav-menu').slideToggle(500, function() {
        $(this).toggleClass('grid')
    });
});