Javascript JS如何在页面中隐藏所有类别

我在网页上使用类别，我构建下一个视图来显示类别。我创建了一个解决方案，可以对应用程序中的所有数据进行分类

但是我有一些我无法解决的问题

所以问题是，当我第一次打开我的网页时，列表中的所有类别都是可见的，而且我希望，类别只需要在类别项按下后才可见

我的代码：

$（文档）.ready（函数（）{
$（'.category_list.category_item[category=“all”]”）。addClass（'ct_item-active'）；
$（'.category_item'）。单击（函数（）{
var catProduct=$（this.attr（'category'）；
控制台日志（catProduct）；
$（'.category_item'）。removeClass（'ct_item-active'）；
$（this.addClass（'ct_item-active'）；
$（'.product item'）.css（'transform'，'scale（0）'）；
函数hideProduct（）{
$（'.product item'）.hide（）；
}setTimeout（hideProduct，400）；
函数showProduct（）{
$（'.product项[category=“'+catProduct+'''“]）.show（）；
$（'.product item[category=“'+catProduct+''“]）.css（'transform'，'scale（1）'）；
}设置超时（showProduct，400）；
});
});
.wrap{
最大宽度：1100px；
宽度：90%；
保证金：自动；
}
.wrap>h1{
颜色：#494B4D；
字体大小：400；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
利润率：15px 0px；
}
.wrap>h1:之后{
内容：''；
宽度：100%；
高度：1px；
背景：#C7C7C7；
利润率：20px0；
}
.商店包装{
显示器：flex；
柔性包装：包装；
}
.类别清单{
显示器：flex；
弯曲方向：立柱；
宽度：30%；
}
.类别列表.类别项目{
显示：块；
宽度：100%；
填充：15px0；
边缘底部：20px；
背景：#E84C3D；
文本对齐：居中；
文字装饰：无；
颜色：#fff；
}
.category\u list.ct\u项目激活{
背景：#2D3E50；
}
.产品清单{
宽度：70%；
显示器：flex；
柔性包装：包装；
}
.产品列表.产品项{
宽度：35%；
左缘：3%；
边缘底部：25px；
盒影：0px 0px 6px 0px rgba（0,0,0,0.22）；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
自我校准：灵活启动；
过渡：全部。4s；
}
.产品列表.产品项img{
宽度：100%；
}
.产品清单.产品项目a{
显示：块；
宽度：100%；
填充：8px0；
背景：#2D3E50；
颜色：#fff；
文本对齐：居中；
文字装饰：无；
}
您只需将
.products list.product项{display:none}
添加到css中即可


$（文档）.ready（函数（）{
$（'.category_list.category_item[category=“all”]”）。addClass（'ct_item-active'）；
$（'.category_item'）。单击（函数（）{
var catProduct=$（this.attr（'category'）；
控制台日志（catProduct）；
$（'.category_item'）。removeClass（'ct_item-active'）；
$（this.addClass（'ct_item-active'）；
$（'.product item'）.css（'transform'，'scale（0）'）；
函数hideProduct（）{
$（'.product item'）.hide（）；
}setTimeout（hideProduct，400）；
函数showProduct（）{
$（'.product项[category=“'+catProduct+'''“]）.show（）；
$（'.product item[category=“'+catProduct+''“]）.css（'transform'，'scale（1）'）；
}设置超时（showProduct，400）；
});
});
.wrap{
最大宽度：1100px；
宽度：90%；
保证金：自动；
}
.wrap>h1{
颜色：#494B4D；
字体大小：400；
显示器：flex；
弯曲方向：立柱；
文本对齐：居中；
利润率：15px 0px；
}
.wrap>h1:之后{
内容：''；
宽度：100%；
高度：1px；
背景：#C7C7C7；
利润率：20px0；
}
.商店包装{
显示器：flex；
柔性包装：包装；
}
.类别清单{
显示器：flex；
弯曲方向：立柱；
宽度：30%；
}
.类别列表.类别项目{
显示：块；
宽度：100%；
填充：15px0；
边缘底部：20px；
背景：#E84C3D；
文本对齐：居中；
文字装饰：无；
颜色：#fff；
}
.category\u list.ct\u项目激活{
背景：#2D3E50；
}
.产品清单{
宽度：70%；
显示器：flex；
柔性包装：包装；
}
.产品列表.产品项{
宽度：35%；
左缘：3%；
边缘底部：25px；
盒影：0px 0px 6px 0px rgba（0,0,0,0.22）；
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
自我校准：灵活启动；
过渡：全部。4s；
显示：无；
}
.产品列表.产品项img{
宽度：100%；
}
.产品清单.产品项目a{
显示：块；
宽度：100%；
填充：8px0；
背景：#2D3E50；
颜色：#fff；
文本对齐：居中；
文字装饰：无；
}

哪个
按钮
？我在你的
html
？@randomSoul中看不到任何
按钮。对不起，我将我的类别列表命名为buttons而不是$（document）。ready（函数（）使用$（“你的按钮”）。单击（函数（）@Manish我尝试一下，不适合我。