推过菜单由于某种原因不起作用

Question

我想推送我的菜单，内容也被推向右侧，但由于某种原因，JS代码无法完成工作。 不触发菜单。有人可以告诉我为什么以及如何解决它吗？<div class="menu-btn toggle"></div>

断续器

$(function() {

      $('.toggle').on('click', function() {

        $('.wrapper').toggleClass('open');

      });

    });

断续器

.wrapper {

    transform: translateX(0px);

    transition: transform .4s ease;

}

.wrapper.open {

    transform: translateX(280px);

}

 #main-nav {

    transform: translateX(-280px);

}

断续器

<div class="wrapper">

    <nav id="main-nav">

        <div class="menu-btn toggle"></div>

        <ul></ul>

    </nav>

</div>

Answer 1

您的代码确实有效，但您需要使代码可见，以便您可以单击它。不漂亮，但显示了它是如何工作的：.toggle$(function() {&nbsp; &nbsp; &nbsp; $('.toggle').on('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; $('.wrapper').toggleClass('open');&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; });.wrapper {&nbsp; &nbsp; transform: translateX(0px);&nbsp; &nbsp; transition: transform .4s ease;}.wrapper.open {&nbsp; &nbsp; transform: translateX(280px);}&nbsp;#main-nav {&nbsp; &nbsp; transform: translateX(-280px);}.toggle {&nbsp; background-color: grey;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrapper">&nbsp; &nbsp; <nav id="main-nav">&nbsp; &nbsp; &nbsp; &nbsp; <div class="menu-btn toggle">|Menu|</div>&nbsp; &nbsp; &nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Item 1</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Item 2</li>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <li>Item 3</li>&nbsp; &nbsp; &nbsp; &nbsp; </ul>&nbsp; &nbsp; </nav></div>

Answer 2

你的代码似乎几乎可以工作，因为JQuery丢失了，在这种情况下，我稍微重写了一下。还需要为菜单和按钮添加一些内容以使其可见。您显示的代码不足以重现问题。;)出于可访问性原因（对键盘交互的本机支持），我还建议对此类交互使用实际的按钮标记。如果您有兴趣：https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTMLconst 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) => {&nbsp; // Get current clicked object/target.&nbsp; let currentTarget = event.currentTarget;&nbsp; // Check if opened class is present on body&nbsp; let menuOpened = body.classList.contains(`${menuToggleClass}`);&nbsp; // Check if menu is already open.&nbsp; if (!menuOpened) {&nbsp; &nbsp; // Adds class to body when not opened&nbsp; &nbsp; body.classList.add(`${menuToggleClass}`);&nbsp; } else {&nbsp; &nbsp; // Removes class from body when menu is already opened&nbsp; &nbsp; body.classList.remove(`${menuToggleClass}`);&nbsp; }});`/* Used percentages(%) instead of a fixed px size for easier responsive behaviour later on the road. */`.main-nav {&nbsp; transform: translateX(-101%);&nbsp; transition: transform .4s ease;}.is-open .main-nav {&nbsp; transform: translateX(0%);}.main-nav_button {&nbsp; position: absolute;&nbsp; top: 0;&nbsp; right: 0;}<div class="wrapper">&nbsp; <button type="button" class="main-nav_button js-site-menu">Menu</button>&nbsp; <nav class="main-nav">&nbsp; &nbsp; <ul>&nbsp; &nbsp; &nbsp; <li>Menu item 1</li>&nbsp; &nbsp; &nbsp; <li>Menu item 2</li>&nbsp; &nbsp; &nbsp; <li>Menu item 3</li>&nbsp; &nbsp; &nbsp; <li>Menu item 4</li>&nbsp; &nbsp; </ul>&nbsp; </nav></div>