Question

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

我用过this example来制作水平手风琴。除了只能添加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");

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

Answer 2

如果仅想使用CSS进行创建，请参考此链接https://codepen.io/AsfanShaikh/pen/bGbRoXO。在此示例中，您可以动态添加手风琴。但是数据没有包装在特定的容器中。如果要包装数据，则必须添加一些JS使其起作用。

单击按钮添加水平手风琴

2 个答案: