打开/关闭导航栏答案

【问题标题】：Open/close navbar打开/关闭导航栏
【发布时间】：2019-07-28 20:49:00
【问题描述】：

网页：http://www.webbuilders.biz/test-durrani/index.html

Codepen：https://codepen.io/mitchellbarron10/pen/EqZjQj

JavaScript 在 html 代码中。

我需要帮助以在页面加载时关闭导航栏（位于页面右上角）。点击时需要打开，点击X时需要关闭（在导航栏的右上角）

我尝试使用两个不同的按钮，一个用于 openbtn，一个用于 closebtn

<div id="main">
<button class="openbtn" onclick="openNav()">&#9776;</button> 
<ul id="menuicons">
  <a href="../html-link.htm"><img src="images/noun_Login_801390.png" width="82" height="86" title="White flower" alt="Flower"></a>
  <a href="../html-link.htm"><img src="images/noun_Shopping Cart_17861.png" width="82" height="86" title="White flower" alt="Flower"></a>
 </ul>
</div>
<script>
script type="text/javascript">/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
function openNav() {
 document.getElementById("mySidebar").style.width = "250px";
 document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
 function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
 }    </script>
 <script type="text/javascript">/* Set the width of the sidebar to 250px and the left margin of the page content to 250px */
 function openNav() {
 document.getElementById("mySidebar").style.width = "250px";
 document.getElementById("main").style.marginLeft = "250px";
}

/* Set the width of the sidebar to 0 and the left margin of the page content to 0 */
function closeNav() {
  document.getElementById("mySidebar").style.width = "0";
  document.getElementById("main").style.marginLeft = "0";
}</script>

【问题讨论】：

标签： html css button bootstrap-4 toggle

【解决方案1】：

你可以做的是使用onload="myfunction()" 事件，它允许你在页面第一次加载时调用一个函数，所以如果你将closeNav() 函数添加到onload 事件中，它看起来会有点像像这样：<body onload="closeNav()"。

通过将<body onload="closeNav()"> 添加到您当前的代码笔中，当页面首次加载时，它不会在右侧显示菜单，然后通过单击另一个按钮，您只需将onClick="openNav()" 事件添加到您选择的内容中即可打开导航栏。

【讨论】：