资源

Question

我对jquery非常熟悉，但我试图学习香草js。我如何将这个jquery片段转换为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

这是vanilla 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
      }
    });
});

将Jquery sidenav转换为vanilla js

1 个答案:

资源