时间戳

首页 > 解决方案 > 设置 width : 0 不隐藏文本

javascript - 设置 width : 0 不隐藏文本

问题描述

我想创建一个侧面导航菜单。这在大屏幕上可见，在小屏幕上隐藏，并在调用 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";

设置显示：none/block 正在解决问题。但是它没有显示过渡，显示和隐藏过渡对我来说非常重要。

请帮忙。谢谢你。

标签： javascripthtmlcsstransition

解决方案

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

推荐阅读