Question

我知道这对你们这些人来说听起来很简单，但我是初学者，我正在努力解决JS问题。

无论如何，我有一个html，css，jquery边栏我想编辑，所以它不会打开/关闭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;">

侧面导航始终在加载时打开/打开

2 个答案: