Javascript 如何自动增加包含两个主题的常见问题解答的高度？

我的网站上有一个FAQ，有两个主题

我在这里创建了一个JSFIDLE：

我的问题：

常见问题B-工作正常-但常见问题A-不正常

两个常见问题都是相同的（我复制并粘贴）--但是

在FAQB上，我做了一个“技巧”，我在末尾放了很多“BR”标签，以手动增加FAQ的高度

常见问题解答A没有这个技巧

但是这个技巧并不是最好的方法，因为高度也会随着显示器的宽度而变化。。如果我有一个小设备-宽度会很小-高度会有所不同

还有一个问题——当我点击FAQ A时，使用这个“BR”技巧，FAQ B会下降很多。。对于最终用户来说，很难理解会发生什么

我需要一个自动控制高度的解决方案

// Question handler
  $('li.q').on(action, function(){

    // gets next element
    // opens .a of selected question
    $(this).next().slideToggle(speed)

    // selects all other answers and slides up any open answer
    .siblings('li.a').slideUp();

    // Grab img from clicked question
    var i = $(this).children('i');

    // remove Rotate class from all images except the active
    $('i').not(i).removeClass('rotate');

    // toggle rotate class
    i.toggleClass('rotate');

  });


 $('.faq_question').click(function() {

        if ($(this).parent().is('.open')){
            $(this).closest('.faq').find('.faq_answer_container').animate({'height':'0'},500);
            $(this).closest('.faq').removeClass('open');

            }else{
                var newHeight =$(this).closest('.faq').find('.faq_answer').height() +'px';
                $(this).closest('.faq').find('.faq_answer_container').animate({'height':newHeight},500);
                $(this).closest('.faq').addClass('open');
            }

    });

---

你做错了。它不会是动态的，因为您的答案也是li，并且没有自己的父级。这里有一个使它充满活力的方法

var faq_clicker=document.queryselectoral（'.faq--clicker'）| | document.querySelector（'.faq--clicker'），
question=document.queryselectoral（'.question'）| | document.querySelector（'.question'）；
[]forEach.call（常见问题解答点击器，元素=>{
elem.onclick=（e）=>{
让PAR＝E.Test.NeXTeleTrimeSimple；
如果（PAR.CopyList.包含）（“活动”）PAR，CaseList.Enter（“Actudio”）；
否则，Pal.CordList.Advin（“Actudio”）；
}
});
[]forEach.call（问题，元素=>{
elem.onclick=（e）=>{
让PAR＝E.Talk.QuestS选择器（“回答”）
afn=document.querySelector（'.answer-active'）；
if（afn）afn.classList.remove（'answer-active'）；
如果（PAR.CopyList.包含）（PraseAc能能能能行）PAR。CaseList.Enter（“应答器活动”）；
否则，PAR.CopyList.Addit（“应答器激活”）；
}
});
ul.parent，ul.answer{
最大高度：0；
溢出：隐藏；
过渡：最大高度0.2s，易于进出；
}
ulli{
光标：指针；
}
ul.parent.active，ul.answer.answer-active{
最大高度：500px；
过渡：最大高度0.5s缓进缓出；
}



我叫什么名字？

我也不知道



谁是我的女孩？

查韦斯




你最喜欢的食物是什么？

泰


我想学什么？

创建编程语言



为什么在常见问题解答B中需要这个高度？嗨！我需要两个常见问题解答中的高度。。如果没有高度，FAQ A不会打开ok-您可以在JSDFIDLE中看到这一点。。使用“BR”-手动增加高度-常见问题解答B打开确定..嗨！当然重要的是最终的解决方案。。基本我需要一个常见问题与主要主题（2，3…）和所有的问题/答案里面。。太多了！！嗨@herm luna！首先，谢谢你的时间！这就是我正在寻找的解决方案。但是，为了完美起见，当我点击另一个答案时，有可能隐藏答案吗？（就像在我的JSDFIDLE中发生的那样？）-这对我来说非常重要（隐藏答案）-因为这个FAQ中的一些答案非常非常巨大（很多文本）-我需要隐藏这个来阅读其他答案，只是为了让用户更容易理解..是的！伟大的我现在将在这里测试我的风格/动画，并尽快向您反馈。太多了！当然，你好@herm luna！我也会给你打分的！我在这里测试代码，遇到了一个问题。。我无法“重置”任何按钮中的常见问题。。这对我来说是个问题，因为答案太多了。。如果我点击一个隐藏问题的FAQ按钮，我也需要隐藏所有答案。。因为如果我有一个大的答案，用户将看不到更多内容，只有大的答案。。。如果您既不更改标记也不更改javascript，可能会让他感到困惑。您还需要更改一些代码以使其正常工作。除非你不改变它，否则它不会工作。：）然后别忘了包括上面的CSS。。我理解..另一个问题：我试图在问题前加上一个“I”（斜体标记）来制作箭头（并设置动画以打开/关闭答案），但这个标记也会破坏脚本哦……是的。我把css放在上面。。