javascript - 如何仅使用 JavaScript 关闭单击 anchor 时的侧边栏？

Question

我有一个侧边栏，我想在有人点击链接时将其关闭。在我的代码中，当我单击 anchor 元素时，侧边栏会关闭一毫秒。我如何在不使用 jQuery 的情况下解决这个问题？a 标签链接到 html 页面

JS:

var elem = document.getElementById('slidebar').getElementsByClassName('button')[0]
element.addEventListener("click", slide);

function slide() {
  document.getElementById('slidebar').classList.toggle('active');
}


var slidebar = document.getElementById('slidebar');
slidebar.addEventListener('click', handleMenuClick);

function handleMenuClick(event) {
  if (event.target instanceof HTMLAnchorElement) {
    document.getElementById('slidebar').classList.add('close');
  }
}

CSS:

#slidebar.active {
  left: 0px;
}

#slidebar.close {
  display: none;
}

Answer 1

首先，确保在单击 anchor 标记时阻止默认事件。否则，它可能会重新呈现页面。

但是根据您的代码，您似乎要在滑动条上添加两个功能。一个关闭，一个打开。由于关闭滑动条的 anchor 标记位于滑动条内部 - 当您单击它时，您首先触发 handleMenuClick 函数，然后它冒泡并触发 slide 函数。所以它关闭和打开很快。

相反，添加第三个元素用于打开滑动条并在那里附加 slide 函数。

此外，您不需要两个类来管理隐藏/未隐藏状态。您可以只提供一个将显示设置为无的类并切换该类列表。如果你想要过渡效果，你可以在 CSS 中实现

也许是这样的:

window.addEventListener('DOMContentLoaded', e => {
  let slidebar = document.getElementById('slidebar')
  let collapseButton = slidebar.getElementById('close-button')
  let openButton = slidebar.getElementById('open-button')

  collapseButton.on('click', toggleClassList)
  openButton.on('click', toggleClassList)

  const toggleClassList = e => {
    e.preventDefault()
    slidebar.classList.toggle('hidden')
  }
})


#slide-bar.hidden {
  display: none;
}

#slide-bar.hidden #close-button {
  display: none;
}

#slide-bar #open-button {
  display: none;
}

显然，这在一定程度上取决于您已经编写的代码。但这是一个可行的基本示例。只需要在CSS中添加滑动效果的过渡