当我单击按钮打开侧边栏时，它会显示一个空白页

Question

这是我一直在从事的学校项目，但我在左上角的侧边栏按钮中遇到了一些障碍。 按钮正在打开并显示一个空白页，有人可以帮我吗？

 function open() { document.getElementById("sidebar").style.display = "relative"; } function close() { document.getElementById("sidebar").style.display = "none"; }

 #sidebar { display: none; height: 100%; width: 10%; background-color: #3c1642; justify-self: left; }

 <nav id="navBar" class="menuBar"> <button onclick="open()" style="border: 0px; background-color: #272640;"> <div class="menuBar" > <div class="menu-inner"> <span class="bar bar-1" id="br1"></span> <span class="bar bar-2" id="br2"></span> <span class="bar bar-3" id="br3"></span> </div> </div> </button> <div class="menuOptions" style="flex-grow: 5; border-right: 0px; align-self: left;"> </div> <div id="head" class="menuOptions" style="flex-grow: 3; border-left: 0px; border-right: 0px; align-self: center; justify-content: center; position: relative;"> <a href="" style="text-decoration:none; text-decoration-color: #f72585; ">WD BOOTCAMP</a> </div> <div class="menuOptions" style="flex-grow: 3; justify-content: end; border-left: 0px; align-self: right; "> <a class="menuBut" style=" border: 3px solid #f72585; border-top: 0px; border-bottom: 0px;"></a> <a class="menuBut"></a> <form action="" style="display: flex; justify-self: end; height: 30%; margin-top: 30px;"> <input type="text" id="searchBar" placeholder="search"> </form> </div> </nav> <div id="sidebar"> <button onclick="close()">Close X</button> <a href="">link1</a> <a href="">link2</a> <a href="">link3</a> </div>

Answer 1

您有几件事需要注意，但主要的两件事是：

• 您没有在button元素上指定type="button" ，因此它们默认行为类似于type="submit"并导致您的表单提交，但您的表单没有action路径，因此您只需一个空白页。
• 除非您将数据提交到另一个位置，否则您甚至不应该首先拥有form元素。

除此之外，您应该尽可能避免使用内联样式，因为它们是最难覆盖的样式，并且通常会导致代码重复和代码混乱。

还要避免内联事件属性，并使用.addEventListener()将您的元素连接到 JavaScript 中的事件。

 const sidebar = document.getElementById("sidebar"); sidebar.querySelector("button").addEventListener("click", function(){ sidebar.classList.add("hidden"); }); document.querySelector("button.butStyle1").addEventListener("click", function(){ sidebar.classList.remove("hidden"); });

 #sidebar { height: 100%; width: 10%; background-color: #3c1642; justify-self: left; } /* Put styles that might need to be added/removed in separate classes so that just that property can be adjusted as needed. */ .hidden { display: none; } /* Avoid inline styles whenever possible */ .menuOptions { flex-grow: 3; border-left: 0px; border-right: 0px; position: relative; } .flexStyles1 { align-self: center; justify-content: center; } .flexStyles2 { align-self: right; justify-content: end; } .butStyle1 { border: 0px; background-color: #e0e0e0; } .form { display: flex; justify-self: end; height: 30%; margin-top: 30px; }

 <nav id="navBar" class="menuBar"> <button type="button" class="butStyle1"> <div class="menuBar" > <div class="menu-inner"> <span class="bar bar-1" id="br1">x</span> <span class="bar bar-2" id="br2">y</span> <span class="bar bar-3" id="br3">z</span> </div> </div> </button> <div class="menuOptions" style="flex-grow: 5; border-right: 0px; align-self: left;"> </div> <div id="head" class="menuOptions flexStyles1"> <a href="" style="text-decoration:none; text-decoration-color: #f72585; ">WD BOOTCAMP</a> </div> <div class="menuOptions flexStyles2"> <a class="menuBut" style=" border: 3px solid #f72585; border-top: 0px; border-bottom: 0px;"></a> <a class="menuBut"></a> <input type="text" id="searchBar" placeholder="search"> </div> </nav> <div id="sidebar" class="hidden"> <button type="button">Close X</button> <a href="">link1</a> <a href="">link2</a> <a href="">link3</a> </div>