javascript - 设置宽度 : 0 is not hiding the text

Question

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

一切都按预期工作，但是即使将宽度设置为 0 后内容也没有隐藏；文本仍然可见。

    @media screen and (max-width: 768px) 
    {
    .mysidebar
    {
	height: 100%; 
    width: 0px; 
    position: fixed; 
    z-index: 15; 
    top: 0; 
    left: 0;
    background-color: #405a84; /
    overflow-x: hidden; 
    padding-top: 10px; 
    transition: 0.5s; 
	padding-right: 0px !important;
    padding-left: 0px !important;
	text-overflow : hidden;
	
    }
    }
    @media screen and (min-width: 768px) 
    {
    .mysidebar
    {
	width : 16%;
	height :  100%;
	display : inline-block;
	float : left;
    }
    .rightmainpane
    {
	width : 84%;
	height : auto;
	display : inline-block;
    }
    }

    <div class="mysidebar" id="mySidenav">
    Some sample content that is not hiding on small screen as expected, but the 
     background color etc are hiding.

    </div>
    <div class="rightmainpane" id="rightmainpane">
    Some ok content that should be visible 
    </div>

使用此 javascript 代码隐藏/显示 id="mySidenav"div

document.getElementById("mySidenav").style.width = "250px";
document.getElementById("mySidenav").style.width = "0";

设置 display : none/block 解决了这个问题。但是它没有显示过渡，显示和隐藏过渡对我来说非常重要。

请帮忙。谢谢。

Answer 1

当您将宽度设置为 0 时，容器上也会有 overflow: hidden。