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 () {

    $('.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;

    display:none;

}

.products-list .product-item img {

    width: 100%;

}

.products-list .product-item a {

    display: block;

    width: 100%;

    padding: 8px 0;

    background: #2D3E50;

    color: #fff;

    text-align: center;

    text-decoration: none;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="wrap">

    <div class="store-wrapper">

        <div class="category_list">

            <a href="#" class="category_item" category="Technical">Technical</a>

            <a href="#" class="category_item" category="Organizational">Organizational</a>

        </div>

        <section class="products-list">

            <div class="product-item" category="Technical">

                <img src="~/images/100004-200.png" alt="">

                <a href="#">Equipment</a>

            </div>

            <div class="product-item" category="Technical">

                <img src="~/images/100004-200.png" alt="">

                <a href="#">Tool</a>

            </div>

            <div class="product-item" category="Organizational">

                <img src="~/images/100004-200.png" alt="">

                <a href="#">Material</a>

            </div>

        </section>

    </div>

</div>