Question

菜单上的js脚本出现问题。我有相同的菜单，但PC和较小版本的样式不同。而且我希望此脚本仅在屏幕小于x宽度时才影响菜单。我该如何实现？这是我的剧本

    var dropdown = document.getElementsByClassName("dropdown-btn");
    var i;

    for (i = 0; i < dropdown.length; i++) {
      dropdown[i].addEventListener("click", function() {
      var dropdownContent = this.nextElementSibling;
      if (dropdownContent.style.display === "block") {
      dropdownContent.style.display = "none";
      } else {
      dropdownContent.style.display = "block";
      }
      });
    }

    }

Answer 1

您可以使用window的{{1}} width属性

JQuery

Answer 2

检查窗口（跨浏览器）的宽度，然后有条件地运行脚本。

var x = 400,
w = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
if (w < x) {
  console.log(w, 'true')
  // do stuff here when screen is smaller
} else {
  console.log(w, 'false')
  // do stuff here when screen is larger
}

Answer 3

要检查窗口（跨浏览器）的宽度，可以使用JavaScript的window，screen和width属性。

它可能会帮助您：

//Smaller screen sizes
var size = 768; 
if(window.screen.width < size) {
    //Your code for smaller screen sizes here
}
else
{
    //Your code for Larger screen sizes here
}

JS脚本仅适用于平板电脑/手机

3 个答案: