设置宽度：0不隐藏文本

Question

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

一切正常，但是即使将width设置为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";

设置显示：无/阻止已解决问题。但是，它没有显示过渡，显示和隐藏过渡对我来说很重要。

请帮助。谢谢。

Answer 1

设置opacity: 0，也可以隐藏内容

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

document.getElementById("mySidenav").style.width = "250px";
document.getElementById("mySidenav").style.width = "0";
setTimeout(function() {
  document.getElementById("mySidenav").style.opacity = "0";
}, 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>

Answer 2

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