页面加载时隐藏产品，点击分类项后显示对应产品的JS实现问题

嘿，我懂你的需求了——你希望页面首次加载时所有产品都处于隐藏状态，只有点击分类项后才展示对应分类的产品。咱们来调整你的代码就能实现：

1. 先让产品默认隐藏 #

最简单的方式是在CSS里给.product-item添加默认隐藏的样式，这样页面加载时就不会看到产品了：

.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: none; /* 新增这行，默认隐藏产品 */
  flex-direction: column;
  align-items: center;
  align-self: flex-start;
  transition: all .4s;
}

2. 调整JavaScript逻辑 #

原来的代码里有个小问题：你初始化时给category="all"的分类加了active类，但你的HTML里并没有这个分类项，所以先把这行删掉。然后修改点击事件的逻辑——因为产品已经默认隐藏了，不需要再执行先隐藏的延迟操作，直接处理显示逻辑就行：

$(document).ready(function () {
  // 删掉这行，你的HTML里没有category="all"的选项
  // $('.category_list .category_item[category="all"]').addClass('ct_item-active');

  $('.category_item').click(function () {
    var catProduct = $(this).attr('category');
    console.log(catProduct);

    // 切换分类的active状态
    $('.category_item').removeClass('ct_item-active');
    $(this).addClass('ct_item-active');

    // 先给所有产品添加缩放收起动画，再切换显示
    $('.product-item').css('transform', 'scale(0)');
    setTimeout(function(){
      $('.product-item').hide();
      // 显示当前分类的产品并添加缩放展开动画
      $('.product-item[category="' + catProduct + '"]').show();
      $('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
    }, 400);
  });
});

3. 可选：默认选中第一个分类并显示对应产品 #

如果你希望页面加载时默认选中第一个分类并展示它的产品，那可以在ready函数里加一行触发第一个分类的点击事件：

$(document).ready(function () {
  // 默认选中第一个分类并触发点击，自动展示对应产品
  $('.category_item:first').addClass('ct_item-active').click();

  $('.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)');
    setTimeout(function(){
      $('.product-item').hide();
      $('.product-item[category="' + catProduct + '"]').show();
      $('.product-item[category="' + catProduct + '"]').css('transform', 'scale(1)');
    }, 400);
  });
});

这样修改后，页面加载时所有产品都会隐藏，只有点击分类项后才会展示对应分类的产品，完美符合你的需求~

内容的提问来源于stack exchange，提问作者qunz666