将 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() {

  var currMenuType = 'desktop';

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

    currMenuType = 'mobile';

  }

  if (currMenuType !== menuType) {

    menuType = currMenuType;

    if (currMenuType === 'mobile') {

      const mobileMenu = document.getElementById('mainnav')

      mobileMenu.setAttribute('id', 'mainnav-mobi')

      mobileMenu.hidden = true;

      const hasChildMenu = document.getElementById('mainnav-mobi').querySelectorAll('li:has(ul)');

      const siteHead = document.getElementById('site-header-inner');

      siteHead.parentNode.insertAfter(mobileMenu, siteHead);

      hasChildMenu.forEach(li => li.querySelectorAll('ul').forEach(ul => ul.hidden = true));

      document.querySelectorAll('.btn-menu')

        .forEach(btnmenu => btnmenu.classList.remove('active'));

      hasChildMenu.forEach(li => li.querySelectorAll('a').forEach(a => {

        const span = document.createElement("span");

        span.classList.add("btn-submenu");

        a.parentNode.insertAfter(span, a);

      }));

    } else {

      const desktopMenu = document.getElementById('mainnav-mobi')

      desktopMenu.setAttribute('id', 'mainnav')

      desktopMenu.removeAttribute('style');

      desktopMenu.querySelectorAll('.submenu').forEach(sm => sm.removeAttribute('style'));

      document.getElementById('header').querySelectorAll('.nav-wrap').forEach(navwrap => {

        navwrap.appendChild(desktopMenu); // you need to clone here if more than one 

      });

      document.querySelectorAll('.btn-submenu').forEach(bsm => bsm.remove());

    }

  }

};

let responsiveMenu = function() {

  var menuType = 'desktop';

  window.addEventListener('load', load_resize)

  window.addEventListener('resize', load_resize)

  document.getElementById("container").addEventListener('click', function(e) { // a div container for mobile-button elements

    const tgt = e.target;

    if (tgt.classList.contains('mobile-button')) {

      document.getElementById('mainnav-mobi').classList.toggle("show") // slideToggle(300); needs a transition

      tgt.classList.toggle('active');

    }

  });

  document.getElementById("mainnav-mobi").addEventListener('click', function(e) {

    const tgt = e.target;

    if (tgt.classList.contains('btn-submenu')) {

      tgt.classList.toggle('active')

      tgt.nextElementSibling.slideToggle(300);

      e.stopImmediatePropagation()

    }

  });

};

Answer 2

查询

$(el).removeAttr('tabindex');

IE8+

el.removeAttribute('tabindex');