Pu sh Over Menu по какой-то причине не работает

Question

Я хочу, чтобы sh мое меню было смещено вправо, но по какой-то причине код JS не выполняет свою работу. <div class="menu-btn toggle"></div> не вызывает меню. Может кто подскажет, почему и как это исправить?

JS

$(function() {
      $('.toggle').on('click', function() {
        $('.wrapper').toggleClass('open');
      });
    });

CSS

.wrapper {
    transform: translateX(0px);
    transition: transform .4s ease;
}

.wrapper.open {
    transform: translateX(280px);
}

 #main-nav {
    transform: translateX(-280px);
}

HTML

<div class="wrapper">
    <nav id="main-nav">
        <div class="menu-btn toggle"></div>
        <ul></ul>
    </nav>
</div>

Answer 1

Кажется, ваш код почти работает, поскольку 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>

Answer 2

Ваш код работает, но вам нужно сделать .toggle видимым, чтобы вы могли щелкнуть по нему. Не очень красиво, но показывает, как это могло бы работать:

$(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);
}

.toggle {
  background-color: grey;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrapper">
    <nav id="main-nav">
        <div class="menu-btn toggle">|Menu|</div>
        <ul>
          <li>Item 1</li>
          <li>Item 2</li>
          <li>Item 3</li>
        </ul>
    </nav>
</div>