将 jQuery 转换为 JS

Question

我有以下 jQuery 代码用于我的导航响应，我需要将其转换为常规的 Javascript。我试图了解它是如何removeAttr与儿童一样有效的。

有谁知道如何将以下代码转换为纯 JavaScript 吗？

let responsiveMenu = function() {

  var menuType = 'desktop';

  

  $(window).on('load resize', function() {

    var currMenuType = 'desktop';

    if (matchMedia('only screen and (max-width: 991px)').matches) {

      currMenuType = 'mobile';

    }

    if (currMenuType !== menuType) {

      menuType = currMenuType;

      if (currMenuType === 'mobile') {

        var $mobileMenu = $('#mainnav').attr('id', 'mainnav-mobi').hide();

        var hasChildMenu = $('#mainnav-mobi').find('li:has(ul)');

        $('#header #site-header-inner').after($mobileMenu);

        hasChildMenu.children('ul').hide();

        hasChildMenu.children('a').after('<span class="btn-submenu"></span>');

        $('.btn-menu').removeClass('active');

      } else {

        var $desktopMenu = $('#mainnav-mobi').attr('id', 'mainnav').removeAttr('style');

        $desktopMenu.find('.submenu').removeAttr('style');

        $('#header').find('.nav-wrap').append($desktopMenu);

        $('.btn-submenu').remove();

      }

    }

  });

  $('.mobile-button').on('click', function() {

    $('#mainnav-mobi').slideToggle(300);

    $(this).toggleClass('active');

  });

  $(document).on('click', '#mainnav-mobi li .btn-submenu', function(e) {

    $(this).toggleClass('active').next('ul').slideToggle(300);

    e.stopImmediatePropagation()

  });

};

Answer 1

尝试一下这个const load_resize = function() {&nbsp; var currMenuType = 'desktop';&nbsp; if (matchMedia('only screen and (max-width: 991px)').matches) {&nbsp; &nbsp; currMenuType = 'mobile';&nbsp; }&nbsp; if (currMenuType !== menuType) {&nbsp; &nbsp; menuType = currMenuType;&nbsp; &nbsp; if (currMenuType === 'mobile') {&nbsp; &nbsp; &nbsp; const mobileMenu = document.getElementById('mainnav')&nbsp; &nbsp; &nbsp; mobileMenu.setAttribute('id', 'mainnav-mobi')&nbsp; &nbsp; &nbsp; mobileMenu.hidden = true;&nbsp; &nbsp; &nbsp; const hasChildMenu = document.getElementById('mainnav-mobi').querySelectorAll('li:has(ul)');&nbsp; &nbsp; &nbsp; const siteHead = document.getElementById('site-header-inner');&nbsp; &nbsp; &nbsp; siteHead.parentNode.insertAfter(mobileMenu, siteHead);&nbsp; &nbsp; &nbsp; hasChildMenu.forEach(li => li.querySelectorAll('ul').forEach(ul => ul.hidden = true));&nbsp; &nbsp; &nbsp; document.querySelectorAll('.btn-menu')&nbsp; &nbsp; &nbsp; &nbsp; .forEach(btnmenu => btnmenu.classList.remove('active'));&nbsp; &nbsp; &nbsp; hasChildMenu.forEach(li => li.querySelectorAll('a').forEach(a => {&nbsp; &nbsp; &nbsp; &nbsp; const span = document.createElement("span");&nbsp; &nbsp; &nbsp; &nbsp; span.classList.add("btn-submenu");&nbsp; &nbsp; &nbsp; &nbsp; a.parentNode.insertAfter(span, a);&nbsp; &nbsp; &nbsp; }));&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; const desktopMenu = document.getElementById('mainnav-mobi')&nbsp; &nbsp; &nbsp; desktopMenu.setAttribute('id', 'mainnav')&nbsp; &nbsp; &nbsp; desktopMenu.removeAttribute('style');&nbsp; &nbsp; &nbsp; desktopMenu.querySelectorAll('.submenu').forEach(sm => sm.removeAttribute('style'));&nbsp; &nbsp; &nbsp; document.getElementById('header').querySelectorAll('.nav-wrap').forEach(navwrap => {&nbsp; &nbsp; &nbsp; &nbsp; navwrap.appendChild(desktopMenu); // you need to clone here if more than one&nbsp;&nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; document.querySelectorAll('.btn-submenu').forEach(bsm => bsm.remove());&nbsp; &nbsp; }&nbsp; }};let responsiveMenu = function() {&nbsp; var menuType = 'desktop';&nbsp; window.addEventListener('load', load_resize)&nbsp; window.addEventListener('resize', load_resize)&nbsp; document.getElementById("container").addEventListener('click', function(e) { // a div container for mobile-button elements&nbsp; &nbsp; const tgt = e.target;&nbsp; &nbsp; if (tgt.classList.contains('mobile-button')) {&nbsp; &nbsp; &nbsp; document.getElementById('mainnav-mobi').classList.toggle("show") // slideToggle(300); needs a transition&nbsp; &nbsp; &nbsp; tgt.classList.toggle('active');&nbsp; &nbsp; }&nbsp; });&nbsp; document.getElementById("mainnav-mobi").addEventListener('click', function(e) {&nbsp; &nbsp; const tgt = e.target;&nbsp; &nbsp; if (tgt.classList.contains('btn-submenu')) {&nbsp; &nbsp; &nbsp; tgt.classList.toggle('active')&nbsp; &nbsp; &nbsp; tgt.nextElementSibling.slideToggle(300);&nbsp; &nbsp; &nbsp; e.stopImmediatePropagation()&nbsp; &nbsp; }&nbsp; });};

Answer 2

查询$(el).removeAttr('tabindex');IE8+el.removeAttribute('tabindex');