JS如何隐藏页面上的所有类别

Question

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

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

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

我的代码：

$(document).ready(function () {

    $('.category_list .category_item[category="all"]').addClass('ct_item-active');

    $('.category_item').click(function () {

        var catProduct = $(this).attr('category');

        console.log(catProduct);

        $('.category_item').removeClass('ct_item-active');

        $(this).addClass('ct_item-active');

        $('.product-item').css('transform', 'scale(0)');

        function hideProduct() {

            $('.product-item').hide();

        } setTimeout(hideProduct, 400);

        function showProduct() {

            $('.product-item[category="' + catProduct + '"]').show();

            $('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');

        } setTimeout(showProduct, 400);

    });

});

.wrap {

    max-width: 1100px;

    width: 90%;

    margin: auto;

}

.wrap > h1 {

    color: #494B4D;

    font-weight: 400;

    display: flex;

    flex-direction: column;

    text-align: center;

    margin: 15px 0px;

}

.wrap > h1:after {

    content: '';

    width: 100%;

    height: 1px;

    background: #C7C7C7;

    margin: 20px 0;

}

.store-wrapper {

    display: flex;

    flex-wrap: wrap;

}

.category_list {

    display: flex;

    flex-direction: column;

    width: 30%;

}

.category_list .category_item {

    display: block;

    width: 100%;

    padding: 15px 0;

    margin-bottom: 20px;

    background: #E84C3D;

    text-align: center;

    text-decoration: none;

    color: #fff;

}

.category_list .ct_item-active {

    background: #2D3E50;

}

.products-list {

    width: 70%;

    display: flex;

    flex-wrap: wrap;

}

.products-list .product-item {

    width: 35%;

    margin-left: 3%;

    margin-bottom: 25px;

    box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);

    display: flex;

    flex-direction: column;

    align-items: center;

    align-self: flex-start;

    transition: all .4s;

}

因此，如您所见，我没有在首页显示所有类别的func。但是，当我重新加载页面时，所有类别均可见，此时我不是3，但是我有3个以上，并且我想在按类别项目后显示此类别。

Answer 1

您只需要添加.products-list .product-item { display:none}到CSS。$(document).ready(function () {&nbsp; &nbsp; $('.category_list .category_item[category="all"]').addClass('ct_item-active');&nbsp; &nbsp; $('.category_item').click(function () {&nbsp; &nbsp; &nbsp; &nbsp; var catProduct = $(this).attr('category');&nbsp; &nbsp; &nbsp; &nbsp; console.log(catProduct);&nbsp; &nbsp; &nbsp; &nbsp; $('.category_item').removeClass('ct_item-active');&nbsp; &nbsp; &nbsp; &nbsp; $(this).addClass('ct_item-active');&nbsp; &nbsp; &nbsp; &nbsp; $('.product-item').css('transform', 'scale(0)');&nbsp; &nbsp; &nbsp; &nbsp; function hideProduct() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.product-item').hide();&nbsp; &nbsp; &nbsp; &nbsp; } setTimeout(hideProduct, 400);&nbsp; &nbsp; &nbsp; &nbsp; function showProduct() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.product-item[category="' + catProduct + '"]').show();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');&nbsp; &nbsp; &nbsp; &nbsp; } setTimeout(showProduct, 400);&nbsp; &nbsp; });});.wrap {&nbsp; &nbsp; max-width: 1100px;&nbsp; &nbsp; width: 90%;&nbsp; &nbsp; margin: auto;}.wrap > h1 {&nbsp; &nbsp; color: #494B4D;&nbsp; &nbsp; font-weight: 400;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; margin: 15px 0px;}.wrap > h1:after {&nbsp; &nbsp; content: '';&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; height: 1px;&nbsp; &nbsp; background: #C7C7C7;&nbsp; &nbsp; margin: 20px 0;}.store-wrapper {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-wrap: wrap;}.category_list {&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; width: 30%;}.category_list .category_item {&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; padding: 15px 0;&nbsp; &nbsp; margin-bottom: 20px;&nbsp; &nbsp; background: #E84C3D;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; text-decoration: none;&nbsp; &nbsp; color: #fff;}.category_list .ct_item-active {&nbsp; &nbsp; background: #2D3E50;}.products-list {&nbsp; &nbsp; width: 70%;&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-wrap: wrap;}.products-list .product-item {&nbsp; &nbsp; width: 35%;&nbsp; &nbsp; margin-left: 3%;&nbsp; &nbsp; margin-bottom: 25px;&nbsp; &nbsp; box-shadow: 0px 0px 6px 0px rgba(0,0,0,0.22);&nbsp; &nbsp; display: flex;&nbsp; &nbsp; flex-direction: column;&nbsp; &nbsp; align-items: center;&nbsp; &nbsp; align-self: flex-start;&nbsp; &nbsp; transition: all .4s;&nbsp; &nbsp; display:none;}.products-list .product-item img {&nbsp; &nbsp; width: 100%;}.products-list .product-item a {&nbsp; &nbsp; display: block;&nbsp; &nbsp; width: 100%;&nbsp; &nbsp; padding: 8px 0;&nbsp; &nbsp; background: #2D3E50;&nbsp; &nbsp; color: #fff;&nbsp; &nbsp; text-align: center;&nbsp; &nbsp; text-decoration: none;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div class="wrap">&nbsp; &nbsp; <div class="store-wrapper">&nbsp; &nbsp; &nbsp; &nbsp; <div class="category_list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="category_item" category="Technical">Technical</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#" class="category_item" category="Organizational">Organizational</a>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; <section class="products-list">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-item" category="Technical">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="~/images/100004-200.png" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Equipment</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-item" category="Technical">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="~/images/100004-200.png" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Tool</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="product-item" category="Organizational">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <img src="~/images/100004-200.png" alt="">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a href="#">Material</a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </section>&nbsp; &nbsp; </div></div>