如何根据屏幕大小有条件地运行 JavaScipt？

Question

我正在尝试创建一个响应式 JS 元素，它在移动视图上看起来像手风琴，比如这个https://www.w3schools.com/howto/howto_js_accordion.asp并且看起来像桌面视图上的选项卡，比如这个https://www .w3schools.com/howto/howto_js_tabs.asp 。 我遇到了麻烦，因为执行此操作的功能在由于 JS 编辑 classList 而被解雇后会相互干扰。 我的 HTML 和 JS 在下面。 我想过在屏幕调整大小时将className重置为正常吗？ 我不知道 go 如何做到这一点。

<link rel="stylesheet" media='screen and (max-width: 726px)' href="styles.css">
<link rel="stylesheet" media='screen and (min-width: 725px)' href="desktop.css">

<div class="container">
<!-- accordion markup -->
   <button class="accordion active" id="btn1">tab 1</button>
   <div class="accordion-content show" id="content1">
     <p>Integer vel arcu ac dolor tincidunt dapibus.</p>
   </div>
   <button class="accordion" id="btn2">tab 2</button>
   <div class="accordion-content" id="content2">
     <p>Integer vel arcu ac dolor tincidunt dapibus.</p>
   </div>
   <button class="accordion" id="btn3">tab 3</button>
   <div class="accordion-content" id="content3">
     <p>Integer vel arcu ac dolor tincidunt dapibus.</p>
   </div>
</div>

var accordions = document.getElementsByClassName("accordion");

if (window.matchMedia("(max-width: 725px)").matches) {
  for (var i = 0; i < accordions.length; i++) {
    accordions[i].onclick = function() {
      this.classList.toggle('is-open');
  
      var content = this.nextElementSibling;
      if (content.style.maxHeight) {
        // accordion is currently open, so close it
        content.style.maxHeight = null;
      } else {
        // accordion is currently closed, so open it
        content.style.maxHeight = content.scrollHeight + "px";
      }
    }
  }
} else  if (window.matchMedia("(min-width: 726px)").matches){
  const toggleActive = (buttonId) => {
    const buttonClicked = document.getElementById(buttonId);
    const currentActiveBtn = document.getElementsByClassName("active")[0];
  
    currentActiveBtn.classList.remove("active");
    buttonClicked.classList.add("active")
  
  }
  
  const toggleShow = (contentId) => {
    const contentToShow = document.getElementById(contentId);
      const currentShownContent = document.getElementsByClassName("show")[0];
    
    currentShownContent.classList.remove("show");
    contentToShow.classList.add("show")
  }

  const buttons = [...document.getElementsByClassName("accordion")];
  
  buttons.forEach(button => {
    button.addEventListener("click", () => {
      toggleActive(button.id)
      
      const contentId = "accordion-content" + button.id.charAt(button.id.length - 1);
      
      toggleShow(contentId);
    });
  
  })
}

Answer 1

我过去这样做的方法是监听 window 调整大小事件，然后根据大小从 dom 元素中换出相关类。 这是使用 jQuery 的代码示例。

 /* Initialize the timer variable */ let timer; /* Listen for window resize */ $(window).resize(function() { /* Clear the timer */ clearTimeout(timer); /* Set a timeout so the function is not firing a million times, then run the callback */ timer = setTimeout(swap_classes, 500); }); function swap_classes() { /* Clear the timer again just in case */ clearTimeout(timer); /* Check the window size */ if (window.matchMedia("(min-width: 768px)").matches) { /* Set all your classes for tabs */ console.log("Tabs"); } else { /* Set classes for accordion */ console.log("Accordion"); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>