jquery 侧导航始终打开/加载时打开

w46czmvw  于 2023-04-11  发布在  jQuery
关注(0)|答案(3)|浏览(124)

我知道这对你们中的一些人来说可能听起来很简单,但我是一个初学者,我正在尝试解决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>
bbuxkriu

bbuxkriu1#

从HTML中删除以下行:

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

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

或者,如果您希望仍然显示这些(从用户界面的Angular 来看不是一个好主意),请删除onclick="closeNav()"onclick="openNav()"
此外,你可能想改变

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

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

4sup72z82#

只需在脚本底部调用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>
c3frrgcw

c3frrgcw3#

看起来它总是在页面加载时打开。一个快速但肮脏的技巧是在页面加载时打开时使其宽度为零,另一个宽度,当单击按钮时假设为400px。只需转到HTML代码的第一行并更改此:<div id="mySidenav" class="sidenav">
<div id="mySidenav" class="sidenav" style= "width:0px;">

相关问题