Javascript 为什么我的手风琴一路关不上？

我正在做一些手风琴常见问题解答。当我在答案部分添加填充物时，我的手风琴不会一直关闭。当我取下填充物时，手风琴工作正常。问题是我想要填充物

如前所述，我的手风琴在去掉衬垫后效果非常好。当添加回填充时，折叠的答案仍然显示答案中的前几行文本

讨论中的手风琴是页面上的最后一个条目，标题为0002

身体{ 字体系列：“无格式”，Arial，无衬线； 字体大小：14px； 颜色：999； 边际：0px； 填充：0px； 背景色：010101； 背景：urlhttps://imgur.com/YRl8KNP.png 固定中心； 背景尺寸：封面； 文本对齐：左对齐； } ：-webkit滚动条{ 宽度：3倍； 高度：3倍； } ：-webkit滚动条轨迹{ 背景色：000； } ：-webkit滚动条拇指{ 背景色：010101； } 答：林克， 答:访问,， a:主动的{ 文字装饰：无； 颜色：999； } 标题{ 填充：160px； } .h_头衔{ 字体：150px“无工作区”； 颜色：fff； 左边距：45像素； 文本转换：大写； } .h_菜单{ 边框顶部：1px实心999； 宽度：1100px； 保证金：0自动； 填充：20px 0px； 边缘底部：175px； } h_top{ 文本对齐：右对齐； 字体：12px“无工作区”； 颜色：fff； 文本转换：大写； 字母间距：4px； 字号：900； } .h_top：：之前{ 内容：'////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////； 字体：11px“arial”； 字体大小：400； 显示：块； 颜色：ff00ff； 边缘底部：20px； 字母间距：4px； } .h_选项卡输入{ 显示：无； } .h_标签{ 位置：相对位置； 溢出：隐藏； 高度：230像素； 边缘顶部：30px； } .h_标签{ 位置：绝对位置； 右：0px； 顶部：20px； 字体：9px“无工作区”； 字母间距：5px； 颜色：fff； 光标：十字线； } .h_标签：第n种类型2{ 顶部：90px； } .h_标签：第n种类型3{ 顶部：160px； } .h_标签b{ 颜色：ff00ff； 字号：700； } .h_标签跨度{ 不透明度：0； 过渡：0.6s； } .h_标签：后{ 内容：“001”； 显示：内联块； 溢出：隐藏； 宽度：40px； 文本对齐：右对齐； 字体八：100； 颜色：fff； 过渡：0.6s； 字体大小：粗体； } .h_标签：第n种类型2：之后{ 内容：“002”； } .h_标签：第n种类型3：之后{ 内容：“003”； } .h_选项卡输入：选中+标签范围{ 不透明度：1； 过渡：0.6s； } .h_选项卡输入：选中+标签：：之后{ 宽度：0px； 过渡：0.6s； } .h_tab1， .h_tab2{ 宽度：700px； 位置：绝对位置； 左：50px； 顶部：50px； 不透明度：0； } .h_简介{ 字体：14px“无工作区”； 颜色：ccc； 字母间距：1px； } .h_cont{ 背景：171717； 填充：20px； 边缘顶部：25px； 溢出：隐藏； 显示：内联块； } h_nav a{ 显示：内联块； 位置：相对位置； 宽度：180px； 利润率：0px 35px 15px 0px； 边框底部：1px实心333； 填充：6px； 字体：12px“共享技术单声道”； 文本转换：大写； 字母间距：1px； 颜色：aaa； } .h_导航a：：之后{ 内容：； 宽度：15px； 高度：2倍； 位置：绝对位置； 左：0； 底部：-1px； 背景：ff00ff； 过渡：0.5s； } .h_导航a:第n种类型2n:之后{ 背景：ff00ff； } .h_导航a:第n种类型3n:之后{ 背景：ff00ff； } .h_导航a:悬停：之后{ 宽度：180px； 过渡：0.5s； } htab1:选中~.h_tab1， htab2:选中~.h_tab2{ 不透明度：1； z指数：2； } 倾斜覆盖层{ 位置：固定； z指数：99； 顶部：0px； 左：0px； 身高：100%； 宽度：100%； 背景：urlhttps://i.imgur.com/zdXP0Uo.jpg 固定中心； 背景尺寸：封面； 显示：无； } 页面包装器{ 背景：透明； } 分页容器{ 宽度：1100px； 溢出：隐藏； 填充：15px 0px； 利润率：15px 0px； } .页面菜单{ 字体：12px“共享技术单声道”； 宽度：220px； 右边距：50px； 左边距：12px； 浮动：左； } .第页菜单a：活动{ 颜色：ff00ff； } .第页菜单h1{ 字体：17px“无工作区”； 字号：700； 文本转换：小写； 颜色：fff； 保证金：30px 0px 10px 0px； } .第页菜单h1：之前{ 内容：“/”； 字体大小：300； 右边距：5px； 颜色：ccc； } .页面内容{ 背景：171717； 宽度：705px； 浮动：左； 轮廓：1px实心rgba255、255、255、0.2； 轮廓偏移：10px； 填充：50px； 文本对齐：对齐； 线高：150%； } .第页内容h1{ 字体：50px“无工作区”； 文本转换：大写； 字体大小：300； 颜色：fff； 边际：0px； 溢出：隐藏； 文本对齐：左对齐； 显示：块； 字母间距：1px； } .第页内容h2{ 字体：15px“共享技术单声道”； 文本转换：小写； 字母间距：1px； 利润率：10px 0px； 颜色：ff00ff； } .page_text{ 填充：20px 50px； } .page_text u{ 颜色：fff； 文本转换 形式：大写； 字号：700； 字母间距：1px； 文字装饰：无； 字体大小：12px； } .第页{ 利润率：30像素； 字体：10px“共享技术单声道”； 线高：17px； 边框：1px实心333； 填充：30px； } .第页{ 颜色：ff00ff； 字体风格：普通； 字体大小：10px； 字母间距：0px； 线高：17px； 文本转换：大写； 文字装饰：无； 字号：700； } .page_菜单ol{ 计数器重置：项目； 边际：0px； 左侧填充：10px； } .page_菜单li ol{ 左侧填充：15px； } .第页菜单b{ 颜色：ff00ff； 字体大小：粗体； } .page_菜单ol li{ 显示：块； } .第页菜单李：在{ 内容：副标题； 反增量：项目； 字体大小：9px； 线高：25px； 颜色：ff00ff； } 李少光{ 边框顶部：1px实心333； 边框底部：1px实心333； 字体：7px“无工作区”； 文本转换：大写； 字母间距：1px； 填充：20px 0px； 边缘底部：10px； } .次优佳能{ 列表样式类型：无； 利润率：30px 0px； 左侧填充：50px； } .苏佳能李b{ 显示：块； 字体：10px“共享技术单声道”； } .第页内容h3{ 字体：14px“共享技术单声道”； 文本对齐：右对齐； 文本转换：小写； 字母间距：1px； 利润率：20px 0px； 颜色：fff； 计数器增量：FAQ计数器； } .page_内容h3:：之前{ 内容：“00”计数器，十进制前导零； 右边距：12px； 颜色：ff00ff； } .第页内容h4{ 字体：13px“共享技术单声道”； 文本转换：小写； 字母间距：1px； 利润率：20px 0px； 颜色：fff； 计数器增量：FAQ计数器； } .page_内容h4:：之前{ 内容：“00”计数器，十进制前导零； 右边距：10px； 颜色：ff1053； } .第页内容h5{ 字体：13px“共享技术单声道”； 文本转换：小写； 字母间距：1px； 利润率：20px 0px； 颜色：fff； 计数器增量：FAQ计数器； } .page_内容h5:：之前{ 内容：“00”计数器，十进制前导零； 右边距：10px； 颜色：4592f7； } .第页内容h6{ 字体：13px“共享技术单声道”； 文本转换：小写； 字母间距：1px； 利润率：20px 0px； 颜色：fff； 计数器增量：FAQ计数器； } .第页内容h6:：之前{ 内容：“00”计数器，十进制前导零； 右边距：10px； 颜色：ff5f32； } /*标记*/ a、 user-taged.mgroup-4{ 颜色：744dba； } a、 user-taged.mgroup-8{ 颜色：ff1053； } a、 user-taged.mgroup-6{ 颜色：4592f7； } a、 user-taged.mgroup-7{ 颜色：ff5f32； } .iconpad{ 填充：10px； 边框：1px实心222； 右边距：10px； 浮动：左； 边缘顶部：5px； } 帕德克斯先生{ 填充：10px； 文本对齐：对齐； } ：-moz选择{ 颜色：ff00ff； } ：：选择{ 颜色：ff00ff； } 常见问题解答{ 利润率：0px 20px 5px 20px； 显示：块； } 李国宝{ 利润率：10px 15px 10px 10px； 左侧填充：15px； 字体大小：9px； 颜色：d8fe56； } 分区开关{ 利润率：10px 30px 20px 30px； 填充：40px； 线高：170%！重要； 背景：rgba0,0,0,0.3； 显示：块； } .手风琴{ 字体：14px“共享技术单声道”； 文本对齐：右对齐； 文本转换：小写； 字母间距：1px； 利润率：20px 0px； 颜色：fff； 背景：无； 边界：无； 过渡：0.4s； } 分区小组{ 利润率：10px 30px 20px 30px； 填充：40px； 线高：170%； 背景：rgba0,0,0,0.3； 显示：块； 最大高度：0； 溢出：隐藏； 过渡：0.2s缓解； } 粘滞 粘滞 糖果牙齿，霓虹灯白痴/ 其他链接/ 欢迎来到新世界；神话与未来相遇。你适合做什么？ 2447年，有文化的超自然和赛博朋克团体在0215城扮演角色。 基本读物 规则 深度内容 知识问题 值得注意的是，这个世界——粘滞的世界——不仅仅是 工作人员小组。我们想让你觉得你可以为这个世界做出贡献！为此，这些都是客人和会员在我们的“不和”中提出的问题。问题要么根据现有的知识来回答，要么在 工作人员团队没有想到任何情况或场景，他们与成员进行了讨论，以得出令人满意的答案。此页面定期更新，因此请确保密切关注它！ 使用CRTL+F函数浏览此页面可能是最简单的，特别是如果您有特定问题！ 快速链接 var acc=document.getElementsByClassNameaccordion； var i； 对于i=0；i

box-sizing: border-box;

在您的面板上。这应该使填充物成为高度的一部分。如果有轻微的变化，您可能需要调整其他值。

---

否则，您可以在关闭时将padding top和bottom设置为0，并在折叠时转换这些值。

要回答您原来的问题，正如您所发现的那样，只要panel div具有顶部和底部padding，它就会有一个固有的最小高度，这就是它一直没有关闭的原因

我能想到的在不改变太多现有代码的情况下实现所需结果的最简单方法是将文本嵌套在作为.panel子级的div中，并将padding属性和可选的line height属性移动到嵌套元素（我称之为.panel\u content），您可以随意调用它

分区小组{ 利润率：10px 30px 20px 30px； 背景：rgba0,0,0,0.3； 显示：块； 最大高度：0； 溢出：隐藏； 过渡：0.2s缓解； } .面板内容{ 填充：40px； 线高：170%； } 英语已经成为世界上大多数国家的主要语言，但由于信息的便捷，现在每一种语言甚至死亡语言都可以学习！语言多样性不仅在这个世界上依然存在，而且正在蓬勃发展；大多数人可以要求某种形式的双语。英语、法语和汉语是0023城市的前三大语言。 工作

一些旁注：

我还强烈建议您验证HTML和CSS，因为您目前有许多验证错误。最好的方法是将代码粘贴到W3C的在线验证器中：

HTML验证程序：

CSS验证程序：

您可能不需要将div添加到.panel选择器中即可获得相同的结果。在所有条件相同的情况下，让选择器尽可能短是一种最佳做法

您可能不需要将.panel设置为显示：block；默认情况下，as div具有此属性值

---

max height属性覆盖height属性，但在编译css时，padding top和bottom值将添加到height中，height的值很可能为80px

因此，将填充设置为

div.panel { padding: 0 40px }

并将脚本更改为

var acc = document.getElementsByClassName("accordion");
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.maxHeight){
      panel.style.maxHeight = null;
      panel.style.paddingTop = 0;
      panel.style.paddingBottom = 0
    } else {
      panel.style.maxHeight = panel.scrollHeight + "px";
      panel.style.paddingTop = null;
      panel.style.paddingBottom = null
    } 
  })
}

---

非常感谢。我对编码相当陌生，所以我知道我的CSS有点糟糕；老实说，谢谢你的帮助@乔德，不客气！我还应该指出，我提议的将line height属性移动到嵌套div的更改是可选的。虽然我认为将其设置为该级别是合理的，但它不会影响您实现所需的功能，因此这是您的决定。@jord另外，如果您对我的答案感到满意，您是否可以单击我帖子旁边的复选标记以正式接受答案？我正在努力赢得更多的声誉，这将对我有所帮助。谢谢您为我们提供了许多实际上与当前问题无关的代码。请将您的代码压缩为