请求实现垂直侧边栏页面加载隐藏及点击切换显隐功能

没问题，咱们轻松搞定这个需求！只需要对现有代码做两处关键修改，就能实现页面加载时侧边栏默认隐藏，同时保留原有的点击显隐功能：

1. 修正并调整CSS样式（核心修改） #

首先，你原来的CSS选择器写错了（应该是类选择器.sidenav而非元素选择器sidenav），同时把初始宽度设为0，这样页面加载时侧边栏就会默认隐藏：

.sidenav {
  height: 100%;
  width: 0; /* 初始宽度设为0，实现默认隐藏 */
  position: fixed;
  background-color: #4682B4;
  overflow-x: hidden;
  transition: 0.5s; /* 保留平滑过渡动画 */
}

2. 保留原有JS逻辑（无需修改） #

你的openNav()和closeNav()函数逻辑完全没问题，直接保留即可：

function openNav() { 
  document.getElementById("mySidenav").style.width = "15%"; 
}
function closeNav() { 
  document.getElementById("mySidenav").style.width = "0"; 
}

3. HTML结构保持不变 #

原有的HTML代码不需要改动，点击汉堡按钮会触发openNav()显示侧边栏，点击关闭按钮触发closeNav()隐藏，完美适配新的初始状态：

<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()">&#9776;</span>
</div>

额外保险方案（可选） #

如果担心某些特殊场景下CSS初始设置不生效，你可以再加一段页面加载完成后的初始化脚本，强制设置侧边栏宽度为0：

// 页面加载完成后执行初始化
document.addEventListener('DOMContentLoaded', function() {
  document.getElementById("mySidenav").style.width = "0";
});

这样修改后，页面一加载侧边栏就会隐藏起来，点击汉堡按钮正常展开，点击关闭按钮正常收起，完全符合你的需求~

内容的提问来源于stack exchange，提问作者Jyoti Jadhav