Javascript 我想添加'；显示更多'；按钮溢出的元素，然后只有在点击鞋子更多，我想显示新的行

我想为溢出的元素添加“显示更多”按钮，然后仅在单击shoe more后，我想显示新行。这是我的代码：这是我的案例，我们需要为溢出属性（如颜色）执行此操作，数据将动态显示大小，如果有更多元素，我们也需要执行此操作。

---

这里有一个解决方案：这项工作的主要方式是知道包含div的大小，因此我们可以将高度设置为一行的高度。然后设置

overflow:hidden

以隐藏超过第一行的所有内容的显示

这允许对颜色方块的大小进行更动态的设置（基于代码中显示的按钮）。每个大小按钮都会更改

--size

CSS变量以更改正方形大小

因此，包含div的高度为

height:calc（var（--size）+var（--margin）*2）

根据变量动态计算高度，以便在按下按钮后色块大小发生变化时改变高度

“显示更多”/“显示更少”按钮切换

showMore

状态

const{useState}=React；
常数sizeToNumber={
标准：“30px”，
中等：“50px”，
小：“15px”，
大：“75px”，
“超大”：“100px”，
“超小”：“5px”
};
函数App（）{
//当前大小（以像素为单位）-用作CSS变量
const[size，setSize]=useState（sizeToNumber.standard）；
const onSizeChange=（val）=>{
//将字符串文本转换为像素值
设置大小（sizeToNumber[val]）；
};
//用于隐藏和显示额外行的状态
const[showMore，setShowMore]=useState（true）；
让数据=[
{
id:1，
名称：“颜色”，
价值：[
“红色”，
“绿色”，
“黄色”，
“蓝色”，
“红色”，
“绿色”，
“黄色”，
“蓝色”，
“红色”，
“绿色”，
“黄色”，
“蓝色”，
“红色”，
“绿色”，
“黄色”，
“蓝色”，
“红色”，
“绿色”，
“黄色”，
“蓝色”，
“红色”，
“绿色”，
“黄色”，
“蓝色”
]
},
{
id:2，
名称：“尺寸”，
价值：[
“标准”，
“中等”，
“小”，
“大”，
“超大”，
“超小”
]
}
];
返回(
//设置--大小和--边距CSS变量
{data.map（（d）=>{
const isColor=d.name.toLowerCase（）.includes（“颜色”）；
const hiddenClass=isColor&！showMore？“隐藏行”：“；
返回(
{d.name}
{d.value.map（（val，index）=>{
if（isColor）{
返回(
);
}
返回(
onSizeChange（val）}
className=“btn btn主m-2”
>
{val}
);
})}
);
})}
设置显示更多（！显示更多）}
>
{showMore？“Show Less”：“Show More”}
);
}
ReactDOM.render（，document.getElementById（'root'））

.App{
字体系列：无衬线；
文本对齐：居中；
}
/*将柔性网格设置到颜色块的父级，以使
事情总是一成不变的*/
.flex{
显示器：flex；
柔性包装：包装；
}
/*将边距/宽度/高度变量应用于颜色块*/
.色块{
保证金：var（--保证金）；
宽度：var（--大小）；
高度：var（--大小）；
}
/*当额外的行应该隐藏时，设置高度和无溢出
高度根据尺寸+（边距*2）计算
这种方式可以动态地更改内容，但仍然可以使用
因为我们需要知道高度，以便以合理的方式隐藏东西*/
.隐藏行{
高度：计算值（变量（--尺寸）+变量（--边缘）*2）；
溢出：隐藏；
}

请发布相关代码的代码示例。我想你要找的是。请检查这些答案中有很多是基于呈现文本的，不幸的是，这里不适用。这将是惊人的，如果线钳适用于任意元素以及感谢这一点。但我想你误解了这个问题，我用一张图片编辑了我的帖子，你可以看到然后再做。就像颜色大小也是一个属性，我们也需要对大小进行调整。只需查看我帖子末尾的图片。