将 Jquery sidenav 转换为 vanilla js [关闭]

Question

我对 jquery 非常熟悉，但我正在尝试学习 vanilla js。我将如何将此 jquery sn-p 转换为 vanilla JS？

(function($) {
  $(function() { // DOM Ready

    // Toggle navigation
    $('#nav-toggle').click(function() {
      this.classList.toggle("active");
      // If sidebar is visible:
      if ($('body').hasClass('show-nav')) {
        // Hide sidebar
        $('body').removeClass('show-nav');
      } else { // If sidebar is hidden:
        $('body').addClass('show-nav');
        // Display sidebar
      }
    });
  });
})(jQuery);

Answer 1

这是原生 js 版本

document.addEventListener("DOMContentLoaded", function(event) {
    document.getElementById('nav-toggle').addEventListener('click', function() {
      this.classList.toggle("active");

      var body = document.querySelector('body');
      // If sidebar is visible:
      if (body.classList.contains('show-nav')) {
        // Hide sidebar
        body.classList.remove('show-nav');
      } else { // If sidebar is hidden:
        body.classList.add('show-nav');
        // Display sidebar
      }
    });
});

资源

• Element.classList
• EventTarget.addEventListener()
• Document.getElementById()
• DOMContentLoaded