你的代碼似乎幾乎可以工作，因為JQuery丟失了，在這種情況下，我稍微重寫了一下。還需要為菜單和按鈕添加一些內容以使其可見。您顯示的代碼不足以重現問題。;)
出于可訪問性原因（對鍵盤交互的本機支持），我還建議對此類交互使用實際的按鈕標記。
如果您有興趣：https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML
const body = document.body; // Get the document body
// Get your menu with a special JS class, prevents accidents when other
// developers will use your code later on (seperate JS functions from styling classes).
const menuToggle = document.querySelector('.js-site-menu');
// Set a classname to use lateron (DRY).
const menuToggleClass = "is-open";
// Add event to listen to.
menuToggle.addEventListener("click", (event) => {
// Get current clicked object/target.
let currentTarget = event.currentTarget;
// Check if opened class is present on body
let menuOpened = body.classList.contains(`${menuToggleClass}`);
// Check if menu is already open.
if (!menuOpened) {
// Adds class to body when not opened
body.classList.add(`${menuToggleClass}`);
} else {
// Removes class from body when menu is already opened
body.classList.remove(`${menuToggleClass}`);
}
});
`/* Used percentages(%) instead of a fixed px size for easier responsive behaviour later on the road. */`
.main-nav {
transform: translateX(-101%);
transition: transform .4s ease;
}
.is-open .main-nav {
transform: translateX(0%);
}
.main-nav_button {
position: absolute;
top: 0;
right: 0;
}
<div class="wrapper">
<button type="button" class="main-nav_button js-site-menu">Menu</button>
<nav class="main-nav">
<ul>
<li>Menu item 1</li>
<li>Menu item 2</li>
<li>Menu item 3</li>
<li>Menu item 4</li>
</ul>
</nav>
</div>
