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

avatar saepudin2000
@saepudin2000

17 Kontribusi 3 Poin

Dipost 4 tahun yang lalu

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() &lt; 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 &lt; 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() &gt; 768 ){ document.querySelector(".sidebar-app").classList.toggle("xs-sidebar") for (var i = 0; i &lt; 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 &lt; 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>

avatar saepudin2000
@saepudin2000

17 Kontribusi 3 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban