Javascript 修改移动设备上的样式元素以实现响应（折叠胶棉）

Question

我正在尝试加载我所有的火棉胶，在台式机和平板电脑上打开，在小型移动设备上关闭，并删除一些图标。

我正在使用 Wordpress，所以我尝试自己写一个 javascript。我从来都不擅长 javascript，现在我也有点粗鲁了。

这是我的无效代码，在我的页面中放在...之间：

<script>
$(window).bind('resize load', function() {
if ($(this).width() < 767) {
var ico document.getElementById("loc");
for (g=0;i<ico.lenght;g++) {
ico[g].style["display"] = 'none';
}
var collaps = document.getElementsByClassName('collapseomatic_content');
for(i=0; i<collaps.length; i++) {
collaps[i].style["display"] = 'none');
}
}
}
</script>

我想更改为 "none" 所有手风琴的显示属性内部样式使用 class "collapsematic_content" 并添加 "display:none"所有带有 "loc" ID 的图像和...但它不起作用。

谢谢。

Answer 1

您的代码有一些语法错误，我随后进行了修复，并在下面制作了一个代码片段示例。（我评论 if statement 只是为了能够显示代码工作，根据需要进行调整）。

$(window).bind('resize load', function() {
  //if ($(this).width() < 767) {
    var ico = document.getElementsByClassName("loc");
    for (g=0; g < ico.length; g++) {    
      ico[g].style.display = 'none';
    }
    var collaps = document.getElementsByClassName('collapseomatic_content');
    for(i=0; i < collaps.length; i++) {
      collaps[i].style.display = 'none';
    }
  //}
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img class="loc" alt="imageA"/>
<img class="NOTloc" alt="imageB"/>
<img class="loc" alt="imageC"/>

<div class="collapseomatic_content">A</div>
<div class="NOTcollapseomatic_content">B</div>
<div class="collapseomatic_content">C</div>

另外，看看 CSS media queries，在某些情况下，它可以帮助您根据屏幕尺寸更改 CSS 属性。

Javascript 修改移动设备上的样式元素以实现响应（折叠胶棉）

Javascript to modify style elements on mobile devices for responsive (collapse collodion)

javascript

mobile

collapse

responsive-design