调整窗口大小后撤消 Java 脚本 onclick 功能

Question

我试图让内容在点击时显示，但仅在屏幕宽度为 700px 的情况下显示。如果用户按下按钮并调整窗口大小，内容就会消失。

基本上，我的代码看起来像这样：

function myFunction() {
  var dropdownContent = document.getElementById('dropdown-content');
  var landing = document.getElementById('landing');

  const mediaQuery = window.matchMedia('(max-width: 700px)')

  if (dropdownContent.style.display == "none" && mediaQuery.matches) {
    dropdownContent.style.display = "block";
    landing.style.display = "none";
  } else {
    landing.style.display = "block";
    dropdownContent.style.display = "none";
  }
}

#dropdown-content {
  display: none;
}

@media only screen and (max-width: 870px) {
  #dropdown-content {
    display: none;
  }
}

@media only screen and (max-width: 700px) {
  #dropdown-content {
    display: none;
  }
}

<button onclick="myFunction()">About</button>
<div id="dropdown-content" style="display:none"></div>
<div id="landing"></div>

我尝试使用媒体查询或各种“window.innerwidth”之类的东西，但似乎没有任何效果！我猜 JavaScript 将所有“display:none”更改为“display:block”，但我只是尝试在 @media only 屏幕和（最大宽度：700px） 下切换“display:none”。

Answer 1

我认为你的

CSS

还可以。媒体查询中的

display: none

将确保 #dropdown-content 最初在较小的屏幕上不可见。

//JavaScript Function for Toggle:
function myFunction() {
  var dropdownContent = document.getElementById('dropdown-content');
  var landing = document.getElementById('landing');
  const mediaQuery = window.matchMedia('(max-width: 700px)');

  if (mediaQuery.matches) {
    dropdownContent.style.display = (dropdownContent.style.display === "none" || !dropdownContent.style.display) ? "block" : "none";
    landing.style.display = (dropdownContent.style.display === "block") ? "none" : "block";
  }
}

//JavaScript for Window Resize Event:

window.addEventListener('resize', function() {
  var dropdownContent = document.getElementById('dropdown-content');
  var landing = document.getElementById('landing');
  const mediaQuery = window.matchMedia('(max-width: 700px)');

  if (!mediaQuery.matches) {
    dropdownContent.style.display = "none";
    landing.style.display = "block";
  }
});