jquery - 单击按钮时添加水平 Accordion

Question

我想在单击按钮时添加一个水平 Accordion 。

我用过this example创建水平 Accordion 。除了只能添加 8 个 Accordion 之外，这工作得很好，我想要用户想要的 Accordion 数量。

我使用了上面的代码，然后通过单击按钮更改了 Accordion 创建部分。以下代码位于链接中，前提是我不希望最大值为 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);
}

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

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