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

Question

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

希望这是有道理的！

<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>

Answer 1

我觉得你可以在 CSS..

中解决这个问题

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

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

编辑：MediaQueries

Answer 2

这是一个可行的解决方案。请注意，我已经注释掉了一些代码以在桌面视图中进行演示。请取消注释，您的代码应该在 "mobile only" 场景中工作。

document.querySelector('.accordion').addEventListener('click', function (e) {
  /*if (screen.width < 768) {*/
  var currentTarget = e.target;
  if (e.target.classList.contains('accordion-title')) {
    var allDesc = Array.prototype.slice.call(document.querySelectorAll('.accordion-description'));
    allDesc.forEach(function (el) {
      el.classList.add('hidden-xs');
    });
    e.target.nextElementSibling.classList.remove('hidden-xs');
  }
  /*}*/
});

/*@media only screen and (max-width: 767px) {
  .hidden-xs {
    display: none;
  }
}*/

/* Comment below code and uncomment above */

/* For demo purpose only */
.hidden-xs {
  display: none;
}

.accordion-title,
.accordion-description {
  padding: 20px;
  margin-bottom: 10px;
}

.accordion-title {
  background-color: #ccc;
  border-radius: 3px;
  border: 1px solid;
}

<div class="accordion">
  <div class="accordion-title">Title 1</div>
  <div class="accordion-description hidden-xs">Some description</div>
   <div class="accordion-title">Title 2</div>
  <div class="accordion-description hidden-xs">Some description</div>
</div>

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

Add display property to accordion onload depending on resolution

javascript

accordion

onload

display

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

Add display property to accordion onload depending on resolution

javascript

accordion

onload

display

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