如何在点击时关闭侧边栏菜单？

// HTML
<button id="toggleButton">关闭菜单</button>
<div id="sidebarMenu">侧边栏菜单内容</div>

// CSS
.sidebar-menu {
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  transition: transform 0.3s ease-in-out;
}

.sidebar-menu.hidden {
  transform: translateX(-200px);
}

// JavaScript
const toggleButton = document.getElementById('toggleButton');
const sidebarMenu = document.getElementById('sidebarMenu');

toggleButton.addEventListener('click', () => {
  sidebarMenu.classList.toggle('hidden');
});

// HTML
<button id="toggleButton">关闭菜单</button>
<div id="sidebarMenu">侧边栏菜单内容</div>

// JavaScript
$('#toggleButton').click(function() {
  $('#sidebarMenu').toggle();
});

<!-- HTML -->
<button id="toggleButton">关闭菜单</button>
<div id="sidebarMenu">侧边栏菜单内容</div>

<!-- CSS -->
<style>
.sidebar-menu {
  width: 200px;
  height: 100%;
  background-color: #f1f1f1;
  transition: transform 0.3s ease-in-out;
}

.sidebar-menu.hidden {
  transform: translateX(-200px);
}
</style>

<!-- JavaScript -->
<script>
const toggleButton = document.getElementById('toggleButton');
const sidebarMenu = document.getElementById('sidebarMenu');

toggleButton.addEventListener('click', () => {
  sidebarMenu.classList.toggle('hidden');
});
</script>