侧面导航始终 open/open 加载

Question

我知道这对你们中的一些人来说可能听起来很简单，但我是初学者，我正在尝试处理 JS。

无论如何，我有一个 html、css、jquery 边栏我想编辑，这样它就不会 open/close onclick。相反，我希望它在页面加载时打开（并保持打开状态）。但我不知道该怎么做。我到处都看过，但找不到答案。也许我只是不知道我到底应该寻找什么。

有人，请帮忙。请让它尽可能简单，因为就像我说的，我是初学者，这对我来说仍然很混乱。谢谢。

function openNav() {
  document.getElementById("mySidenav").style.width = "200px";
}

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

<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; </a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<span onclick="openNav()">open</span>

Answer 1

只需在脚本底部调用 openNav。

<div id="mySidenav" class="sidenav" >
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; </a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<span onclick="openNav()">open</span>

<script type="text/javascript">
 function openNav() {
 document.getElementById("mySidenav").style.width = "200px";
}

function closeNav() {
 document.getElementById("mySidenav").style.width = "0";
}
  
openNav()
</script>

Answer 2

从您的 HTML 中删除以下行：

<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times; </a>

和

<span onclick="openNav()">open</span>

或者，如果您仍想保留这些显示（从用户界面的角度来看这不是一个好主意），请删除 onclick="closeNav()" 和 onclick="openNav()"。

此外，您可能还想更改

<div id="mySidenav" class="sidenav" >

到

<div id="mySidenav" class="sidenav" style="width:200px;">

侧面导航始终 open/open 加载

Side Navigation always open/open on load

html

javascript

css

jquery

sidebar