单击按钮时添加水平手风琴

Question

我想在单击按钮时添加一个水平手风琴。

我用这个例子创建了一个水平手风琴。这工作得很好，除了只能添加 8 个手风琴的事实， 我想要用户想要的手风琴数量.

我使用了上面的代码，然后在单击按钮时更改了手风琴创建部分.下面的代码在提供的链接中，我不希望最大值为 8。它应该是任何动态值。

li:nth-child(1):nth-last-child(2) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 80px);
}
li:nth-child(8):nth-last-child(1) input[type="radio"]:checked ~ .accslide {
width: calc(100% - 320px);
}

我想要一个动态手风琴数量的输出.如何修改 css 部分以适用于添加的任意数量的手风琴。非常感谢对此的任何帮助。

Answer 1

我通过添加一些JS对其进行了修改。希望这能帮助您理解。这将允许您添加任意数量的选项卡。我试图保持简单和容易。:)

let labels = document.querySelectorAll("label");
let width = 0;
labels.forEach(label => {
width += label.clientWidth;
});
document.documentElement.style.setProperty("--label-width", width + "px");

这是代码笔： https://codepen.io/hunzaboy/pen/WNeOOPr

Answer 2

如果您只想使用CSS，请参阅此链接 https://codepen.io/AsfanShaikh/pen/bGbRoXO。在此示例中，您可以动态添加手风琴。但是数据不会包装在特定容器中。如果要包装数据，则必须添加一些JS才能使其正常工作。