gpt4 book ai didi

javascript - 当子 Accordion 边框与父边框重叠时,如何展开父 CSS Accordion

转载 作者:太空宇宙 更新时间:2023-11-03 22:29:11 26 4
gpt4 key购买 nike

资源和背景

https://jsfiddle.net/wwx100f8/69/

我正在尝试创建一个可扩展/可折叠的 Accordion 来容纳餐厅的食物选项,这是一个类似于 Just-Eat 或 Hungry House 的数字菜单。

我尝试使用 W3Schools 实现动画 Accordion 来制作这个数字食物菜单。 https://www.w3schools.com/howto/howto_js_accordion.asp

问题

如您在我的代码中所见,我试图“嵌套”<button class="accordion">在另一个。

但是,嵌套 Accordion 一旦扩展,就不会再扩展它的父容器。这会导致子 Accordion 的内容被隐藏或 chop 。

此问题通过在打开子 Accordion 后折叠父 Accordion 来解决。但这对用户来说很不方便。

我认为我需要的

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

我也乐于接受任何有关如何实现此“数字菜单”的建议。

我的示例代码

https://jsfiddle.net/wwx100f8/69/

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;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}

.active, .accordion:hover {
background-color: #ccc;
}

.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;
}

.active:after {
content: "\2212";
}

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
<button class="accordion">Section 1</button>
<div class="panel">
<p>The Text in Section 1</p>
<button class="accordion">Section 2</button>
<div class="panel">
<p>The Text in Section 2</p>
</div>
</div>

最佳答案

不要为 div.panelmax-height 设置绝对值,而是尝试将 max-height 设置为 initial like this .

但是,这样做会破坏您的动画,您可以切换到使用 jquery 制作动画(.slideUp/.slideDown.slideToggle),它没有这个问题,或者尝试一些计时器的技巧:https://jsfiddle.net/wwx100f8/80/

关于javascript - 当子 Accordion 边框与父边框重叠时,如何展开父 CSS Accordion ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49475704/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com