Javascript 当子手风琴边框与父手风琴边框重叠时，如何展开父手风琴资源和背景_Javascript_Jquery_Html_Css_Accordion

Javascript 当子手风琴边框与父手风琴边框重叠时，如何展开父手风琴资源和背景

javascript jquery html css

Javascript 当子手风琴边框与父手风琴边框重叠时，如何展开父手风琴资源和背景,javascript,jquery,html,css,accordion,Javascript,Jquery,Html,Css,Accordion,我正在尝试创建一个可扩展/可折叠的手风琴来容纳餐厅食物选项，一个类似于只吃或饿房子的数字菜单使用W3Schools，我尝试实现动画手风琴来制作这个数字食品菜单。问题正如您在我的代码中看到的，我试图将嵌套在另一个代码中但是，嵌套的accordion一旦展开，就不会展开其父容器。这会导致儿童手风琴的内容被隐藏或切断打开子手风琴后，通过折叠父手风琴可以解决此问题。但这对用户来说很不方便我想我需要什么我想我需要一些方法来设置css，以便手风琴容器适合子内容。在单击之前，它们似乎是固定的

我正在尝试创建一个可扩展/可折叠的手风琴来容纳餐厅食物选项，一个类似于只吃或饿房子的数字菜单

使用W3Schools，我尝试实现动画手风琴来制作这个数字食品菜单。

问题正如您在我的代码中看到的，我试图将

嵌套在另一个代码中

但是，嵌套的accordion一旦展开，就不会展开其父容器。这会导致儿童手风琴的内容被隐藏或切断

打开子手风琴后，通过折叠父手风琴可以解决此问题。但这对用户来说很不方便

我想我需要什么我想我需要一些方法来设置css，以便手风琴容器适合子内容。在单击之前，它们似乎是固定的

我也愿意接受任何关于如何实现这个“数字菜单”的建议

我的示例代码

var acc=document.getElementsByClassName（“accordion”）；
var i；
对于（i=0；i


手风琴{
背景色：#eee；
颜色：#444；
光标：指针；
填充：18px；
宽度：100%；
边界：无；
文本对齐：左对齐；
大纲：无；
字体大小：15px；
过渡：0.4s；
}
.活动，.手风琴：悬停{
背景色：#ccc；
}
.手风琴{
内容：“\002B”；
颜色：#777；
字体大小：粗体；
浮动：对；
左边距：5px；
}
.活动：之后{
内容：“\2212”；
}
.小组{
填充：0 18px；
背景色：白色；
最大高度：0；
溢出：隐藏；
过渡段：最大高度0.2s放松；
}

第1节
第1节的案文
第二节
第2节的案文

请尝试将

max height

设置为

initial

，而不是为

div.panel

的

max height

设置绝对值

但是，这样做会破坏动画效果，您可以切换到使用jquery来制作没有此问题的动画（

.slideUp

.slideDown

或），或者尝试一些计时器技巧：

而不是为

div.panel

的

最大高度设置绝对值，尝试将max height
设置为initial

但是，这样做会破坏动画效果，您可以切换到使用jquery来制作没有此问题的动画（.slideUp
/.slideDown
或），或者尝试一些计时器技巧：
太好了，Bor691，工作原理与我描述的一样。意外的问题是子类别比父类别小一点。这意味着我越深入，分类按钮越小。这有什么办法吗？再次感谢。@phpN00b它们变小了，因为您在jsfiddle中给css第31行的.panel
添加了填充，删除后它们的大小都相同。这太棒了，Bor691，工作原理与我描述的一样。意外的问题是子类别比父类别小一点。这意味着我越深入，分类按钮越小。这有什么办法吗？再次感谢。@phpN00b由于您在jsfiddle中css第31行的.panel
中添加了填充，所以它们变小了，这使得它们的大小都相同。