Javascript 设置宽度：0未隐藏文本

我想创建一个侧导航菜单。它在大屏幕上可见，在小屏幕上隐藏，在调用javascript函数取消隐藏时可见

一切正常，但即使将宽度设置为0，内容也不会隐藏；文本仍然可见

@媒体屏幕和（最大宽度：768px）
{
mysidebar先生
{
身高：100%；
宽度：0px；
位置：固定；
z指数：15；
排名：0；
左：0；
背景色：#405a84/
溢出x：隐藏；
填充顶部：10px；
过渡：0.5s；
右填充：0px！重要；
左侧填充：0px！重要；
文本溢出：隐藏；
}
}
@媒体屏幕和屏幕（最小宽度：768px）
{
mysidebar先生
{
宽度：16%；
身高：100%；
显示：内联块；
浮动：左；
}
.rightmainpane
{
宽度：84%；
高度：自动；
显示：内联块；
}
}

一些示例内容并不像预期的那样隐藏在小屏幕上，但是
背景色等被隐藏。
一些应该可见的ok内容

将宽度设置为0时，容器上也有

溢出：隐藏

。

设置

不透明度：0

，以隐藏内容

document.getElementById("mySidenav").style.opacity = "0";

document.getElementById（“mySidenav”）.style.width=“250px”；
document.getElementById（“mySidenav”）.style.width=“0”；
setTimeout（函数（）{
document.getElementById（“mySidenav”）.style.opacity=“0”；
}, 0);
@媒体屏幕和（最大宽度：768px）{
mysidebar先生{
身高：100%；
宽度：0px；
位置：固定；
z指数：15；
排名：0；
左：0；
背景色：#405a84；
/溢出x：隐藏；
填充顶部：10px；
过渡：0.5s；
右填充：0px！重要；
左侧填充：0px！重要；
文本溢出：隐藏；
}
}
@媒体屏幕和屏幕（最小宽度：768px）{
mysidebar先生{
宽度：16%；
身高：100%；
显示：内联块；
浮动：左；
}
.rightmainpane{
宽度：84%；
高度：自动；
显示：内联块；
}
}

一些示例内容没有像预期的那样隐藏在小屏幕上，但是背景颜色等被隐藏。
一些应该可见的ok内容
为什么不直接使用
display:none
？正如我所说，设置display:none解决了问题的一部分。但是，当我再次尝试显示它时，它没有显示转换，而是立即显示div。我想要0.5s的转换。谢谢benvc的回答，它解决了问题。谢谢大家。这是因为一个打字错误——
背景色：#405a84/
删除该反斜杠会导致溢出-x

按预期隐藏元素。哦，是的，我从不同的模板中处理了代码并删除了一些注释。好像我漏掉了那个反斜杠。感谢您的支持。我没有设置overflow-x:hidden，而是尝试按照benvc的建议设置overflow:hidden（好像他删除了评论）。成功了。你的回答很好，很好用。谢谢，谢谢大家。奇怪的是，当我使用overflow:hidden而不是overflow-X:hidden时，它起了作用。我不知道它为什么起作用，但它起作用了。谢谢大家。但是

overflow-y

不会隐藏。同时隐藏两个轴将隐藏内容。

overflow-x

将隐藏单独使用的元素，不必同时包含两个轴。我认为问题在于它前面那行中的错误反斜杠。