javascript - 在我的模板垂直菜单栏中,我希望它在页面加载时隐藏
问题描述
我只用于隐藏和显示,但不用于页面加载
我想在 onclick 事件上启用或禁用它,在页面加载时它会被隐藏..
function openNav() {
document.getElementById("mySidenav").style.width = "15%";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
}
sidenav {
height: 100%;
width: 15%;
position: fixed;
background-color: #4682B4;
overflow-x: hidden;
transition: 0.5s;
}
<div class="col-sm-2">
<div id="mySidenav" class="sidenav">
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()"><i class="fa fa-times-circle" style="font-size:16px;color:white"></i></a>
<div class="menus">
<a href="#">About</a>
<a href="#">Services</a>
<a href="#">Clients</a>
<a href="#">Contact</a>
</div>
</div>
<span style="font-size:30px;cursor:pointer" onclick="openNav()">☰</span>
</div>
请帮助页面加载脚本...
解决方案
如果我理解正确你想要
#mySidenav{
visibility: hidden;
}
并在加载后
document.getElementById("mySidenav").style.visibility= "visibile";
这将在加载时隐藏 sidenav 并在加载后显示它。
推荐阅读
- python - 如何在python中用字典更新json对象
- powerbi - 导出每个 Power BI 报表的所有用户和访问权限
- c# - 以正确的顺序更新从和到跨度以避免与先前值相交冲突
- jira - 对于 Jira 数据库中的自定义字段,Stringvalue 字段为空
- html - 悬停在联系按钮和表单字段文本颜色上
- node.js - 我一直在下载 nodemon 一个 npm 包,但它不工作,这是我的代码
- windows - 如何在 windows 上通过 SSH 连接到本地网络?
- botframework - 更改基于 MS Teams 搜索的消息扩展中的登录文本
- amazon-web-services - 销毁失败/取消的 Terraform 应用的 AWS 资源
- javascript - 生成缩略图 firebase javascript