设置宽度：0不隐藏文本

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";

设置显示：无/阻止可以解决问题。然而它没有显示过渡，显示和隐藏过渡对我来说非常重要。

请帮忙。谢谢你。

Answer 1

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

overflow: hidden

。

Answer 2

设置

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 3

我用

解决了它

content-visibility: auto;