时间戳

首页 > 解决方案 > 根据分辨率将显示属性添加到手风琴 onload

javascript - 根据分辨率将显示属性添加到手风琴 onload

问题描述

我在我的网站上使用 W3C 手风琴，并且只希望手风琴在页面低于 768 像素时处于活动状态。到目前为止，我已经调整了脚本，以便“面板”div 将切换，但它们最初是显示的，而不是隐藏的。当分辨率低于 768px 时，我可以在代码中添加一行以最初隐藏面板 div 吗？我尝试将 display:none 添加到 css 表中的元素，但切换脚本不会覆盖它。

希望这是有道理的！

<script>
if (screen.width < 768) {
var acc = document.getElementsByClassName("filterAccordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
}
</script>

标签： javascriptaccordiononloaddisplay

解决方案

我有一种感觉，你可以在 CSS 中管理它。

@media only screen and (max-width: 768px) {
    .filterAccordion {
        display: none;
    }
}

至于 Quentin 提到的手风琴。W3Schools 可能不是最好的信息来源。对于像这样的通用模块，如果您愿意使用 Bootstrap(3/4) 可能是一个更理想的框架。

编辑：媒体查询

推荐阅读