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

我不想为了达到这个简单的效果而使用整个库（jqueryui）。我使用的代码在一定程度上可以工作，但当浏览器的大小调整到1000px以下时，它会被挤压

结果显示在我的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>

问题

回答

问题

回答


$（“#手风琴李：偶数”）.addClass（“手风琴”）；
$（“#手风琴李：奇数”）.addClass（“面板”）；
var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i

---

另外，我在这里使用了jQueryUI组件，这就是我希望我的vanilla JS手风琴工作的方式。

面板div上的最大高度就是问题所在。请在调整窗口大小后尝试计算所有打开的手风琴的高度。这应该能解决你的问题。您只需在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";
    }     
  });
}

而是写下这个

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";
} 

---

你说的壁球是什么意思？我的机器运转良好。任何特定的浏览器？@nanditarorasharma当屏幕变小时，你会注意到答案中的文本开始隐藏在问题后面。我正在使用Chrome，但我在Firefox、Opera和IE上测试了它。我的ans在@JDoe解决了你的问题吗？删除这部分代码将完全停用手风琴。。。我接受了你的建议，认为是最大高度造成了问题，并尝试使用其他选项，但没有效果。当前，如果单击手风琴并将浏览器保持在该大小，则手风琴可以完美工作。调整浏览器的大小会把事情搞砸，我也不知道为什么。这个手风琴是你自己做的？为什么不使用一些框架的手风琴呢？likr bootstrap的手风琴非常好用，我使用的是vanilla JS，因为我不想在这个项目中使用任何框架或库。我在这里使用了jQueryUI的组件，它工作得非常好，只是我想用纯JavaScript复制它。这是因为您是根据打开时的窗口宽度来计算打开的accordian的高度的。您需要在调整窗口大小时更新打开的手风琴的高度。请在调整窗口大小后尝试计算所有打开的手风琴的高度。这应该能解决你的问题。您只需要运行我告诉您的代码，在window.resize函数中对所有打开的文件进行注释。

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