JavaScript 手风琴：为什么它会在较小的屏幕上挤压？

Question

我不想使用整个库 (jQuery UI) 来实现这个简单的效果。我使用的代码在一定程度上可以工作，但是当浏览器的大小调整到 1000 像素以下时它会被压缩。

结果在我的常见问题解答页面上：https://www.unidrones.co.za/VRentals/faq（随着屏幕变小，您会注意到答案开始隐藏在下一个手风琴后面）

我尝试用 "em" 替换 "px" 但这不起作用。我应该怎么做才能让它像所有屏幕尺寸的普通手风琴一样工作？

<ul id="accordion">
<li><p>Question...</p></li>
<li><p>Answer...</p></li>
<li><p>Question...</p></li>
<li><p>Answer...</p></li>
</ul>

<script>
$("#accordion li:even").addClass("accordion");
$("#accordion li:odd").addClass("panel");
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("activeAccordion");
    var panel = this.nextElementSibling;
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    } 
  });
}
</script>

P.S。我在这里使用了 jQueryUI 组件 https://www.fishgelatine.co.za/recipes 这就是我希望我的香草 JS 手风琴工作的方式。

Answer 1

您在面板 div 上的最大高度是问题所在。请在 window 调整大小后尝试计算所有打开的手风琴的高度。那应该可以解决您的问题。您只需要运行在 window.resize 函数中为所有打开的手风琴计算上面代码中的高度的代码。

window.addEventListener("resize", recalculate(function(e){
    for (i = 0; i < acc.length; i++) {
        var panel = acc[i].nextElementSibling;  
        if (panel.style.maxHeight){
          panel.style.maxHeight = panel.scrollHeight + "px";
        }
    }
});
for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("activeAccordion");
    var panel = this.nextElementSibling;  
    if (panel.style.maxHeight){
      panel.style.maxHeight = null;  
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
    }     
  });
}

或者您也可以执行以下操作。

我认为你应该 remove this part 你的 js

if (panel.style.maxHeight){
  panel.style.maxHeight = null;
} else {
  panel.style.maxHeight = panel.scrollHeight + "px";
}

改为这样写

if (panel.style.display === "block"){
  panel.style.display = null;
} else {
    panel.style.display = "block";
}

并添加此 CSS

#faq .panel {
    display: none;
}

但它的缺点是你的动画效果不会显示，所以你也可以这样做。

或者你也可以这样做

像这样更改您的最大高度代码

if (panel.style.maxHeight === "inherit"){
  panel.style.maxHeight = null;
} else {
  panel.style.maxHeight = "inherit";
}

JavaScript 手风琴：为什么它会在较小的屏幕上挤压？

JavaScript Accordion: Why does it squash on smaller screens?

javascript

accordion