切换按钮以在单击时展开导航菜单

Question

当我单击菜单锚元素时，它会将我带回页面顶部。 当我滚动浏览网站时，我希望菜单停留在单击菜单锚点时滚动到的部分。 我希望菜单锚点仅充当扩展导航的打开和关闭 function。 [

 function openMenu() { document.getElementById('menu').style.width = "608px" document.getElementById('content').style.marginLeft = "608px" } function closeMenu() { document.getElementById('menu').style.width = "0px" document.getElementById('content').style.marginLeft = "0px" }

 :root { --main-color: #FEFF66; --second-color: #000000; --third-color: #FFFFFF; } * { margin: 0; padding: 0; }.slide { margin: 18px; font-size: 25px; position: fixed; }.slide a { text-decoration: none; color: var(--second-color); writing-mode: vertical-rl; transform: rotate(-180deg); }.help a { text-decoration: none; color: var(--second-color); }.help { display: flex; height: 100%; width: 0; position: fixed; z-index: 1; top: 0; left: 0; background-color: var(--third-color); color: var(--second-color); overflow: hidden; }.links { font-size: 40px; line-height: 60px; padding-top: 14px; }.header-menu { writing-mode: vertical-rl; transform: rotate(-180deg); margin: 18px; font-size: 25px; padding-left: 55px; }

 <section id="header"> <span class="slide"> <a href="#" onclick="openMenu()">MENU</a> </span> <div id="menu" class="help"> <div><a class="header-menu" href="#" onclick="closeMenu()">MENU</a></div> <div class="links"> <a href="#story">OUR STORY</a><br> <a href="#rooms">ROOMS + BOOK</a><br> <a href="#neighbourhood">THE NEIGHBOURHOOD</a><br> <a href="#art">THE ART</a><br> <a href="#faq">FAQ</a> </div> </div> </section>

] 1

Answer 1

在您的点击侦听器中，接收到的事件如下所示：

<div><a class="header-menu" href="#" onclick="closeMenu($event)">MENU</a></div>

在这种情况下，模板中的$event具有特殊的含义。

然后，在您的closeMenu function 上进行相应调整并防止浏览器对锚元素的默认行为。

// Here, the function parameter can be named whatever you like,
// I named it "event" but anything else would work.
function closeMenu(event) {
  // The line below will prevent the default behavior of the browser
  // for this element and event, which means, it scroll to anywhere
  // in this case, nor redirect to another page in case you had a URL
  // in the href attribute.
  event.preventDefault();
  // Your code ...
}

Answer 2

添加event.preventDefault(); 在您的 javascript 内。

function openMenu(event) {
    event.preventDefault();
    document.getElementById('menu').style.width = "608px"
    document.getElementById('content').style.marginLeft = "608px"
}

这会阻止您单击的 object 的默认操作，在本例中为锚标记。

参考： https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault?retiredLocale=it