首頁猿問將 jQuery 轉換為 JS

將 jQuery 轉換為 JS

JavaScript

慕尼黑的夜晚無繁華 2023-07-14 10:40:57

我有以下 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() });};

查看完整描述

2 回答

交互式愛情

TA貢獻1712條經驗獲得超3個贊

嘗試一下這個

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

}

});

};

反對回復 2023-07-14

呼喚遠方

TA貢獻1856條經驗獲得超11個贊

查詢

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

IE8+

el.removeAttribute('tabindex');

反對回復 2023-07-14

2 回答
0 關注
215 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

將 jQuery 轉換為 JS

將 jQuery 轉換為 JS

2 回答

添加回答