Postingan lainnya
Kelas Premium!
Belajar bikin website dari nol sekarang
Gunakan kupon "lebihcepat" untuk diskon 25%!
Javascript media query resize
Kenapa Pada saat di resize tombol button sidebar terkadang berfungsi terkadang tidak
const x = document.querySelectorAll("#toggle-sidebar");
const m = document.querySelector(".sidebar-app");
const title = document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text")
const icon = document.querySelectorAll(".sidebar-app .menu-app .link-app .link")
const logo = document.querySelector(".sidebar-app .logo-name a b")
const logoText = document.querySelector(".sidebar-app .logo-name a")
$(function () {
function resize() {
if (window.matchMedia('only screen and (min-width: 769px)').matches) {
if(m.classList.contains('show-sidebar')){
}else {
x.forEach(function (e) {
e.addEventListener("click", function () {
m.classList.toggle('xs-sidebar')
logo.classList.remove('none')
for (var i = 0; i < title.length; i++) {
title[i].classList.remove('none')
}
if(m.classList.contains('xs-sidebar')){
logo.classList.add('none')
for (var i = 0; i < title.length; i++) {
title[i].classList.add('none')
}
}
})
})
}
} else if (window.matchMedia('only screen and (max-width: 768px)').matches) {
m.classList.remove('show-sidebar')
if(m.classList.contains('xs-sidebar')){
for (var i = 0; i < title.length; i++) {
title[i].classList.remove('none')
}
}else{
x.forEach(function (e) {
e.addEventListener("click", function () {
m.classList.toggle('show-sidebar')
})
})
}
}
}
window.addEventListener('resize', resize, false);
resize();
}());
1 Jawaban:
Jawaban Terpilih
Solved
Update
<pre> function vanilaReady(fn) { if (document.readyState === "complete" || document.readyState === "interactive") { setTimeout(fn, 1); } else { document.addEventListener("DOMContentLoaded", fn); } }
vanilaReady(function() { document.querySelector("#toggle-sidebar").addEventListener("click", function () { if($(window).width() < 769 ){ document.querySelector(".sidebar-app").classList.toggle("show-sidebar") document.querySelector(".sidebar-app .logo-name a b").classList.remove('none') document.querySelector(".sidebar-app").classList.remove("xs-sidebar") for (var i = 0; i < document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text").length; i++) { document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text")[i].classList.remove('none') } if(document.querySelector(".sidebar-app").classList.contains("show-sidebar")){ document.body.addEventListener("mousedown", function () { document.querySelector(".sidebar-app").classList.remove("show-sidebar") }) } }else if($(window).width() > 768 ){ document.querySelector(".sidebar-app").classList.toggle("xs-sidebar") for (var i = 0; i < document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text").length; i++) { document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text")[i].classList.remove('none') } document.querySelector(".sidebar-app .logo-name a b").classList.remove('none') if(document.querySelector(".sidebar-app").classList.contains("xs-sidebar")){ for (var i = 0; i < document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text").length; i++) { document.querySelectorAll(".sidebar-app .menu-app .link-app .link .link-text")[i].classList.add('none') } document.querySelector(".sidebar-app .logo-name a b").classList.add('none') } } }) }); </pre>