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

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

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

我正在使用 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 的图像和...但它不起作用。

谢谢。

您的代码有一些语法错误,我随后进行了修复,并在下面制作了一个代码片段示例。 (我评论 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 属性。