Javascript 如何展开和折叠显示和隐藏元素（筛选的div）的混合列表，而不显示隐藏的元素

我对编码基本上是新手，但是我有一长串的产品，我需要根据特定的标准加上一个show more/less函数进行筛选。问题是：1。当我筛选元素时，某些类别的项目少于默认设置2。如果显示的元素的总高度较短，我需要容器的高度来匹配该高度（我设置了最大高度，但当过滤器更改产品数量或我尝试展开列表以显示其他隐藏产品时，它不会增加）3.如果应用了过滤器，并且列表长度超过显示的默认长度，如果我使用该功能显示更多项目，则不属于该类别的隐藏元素将变为可见

这是实际的jquery脚本，html太长了，我不会完整发布它，但我会发布一个产品设置示例

jQuery脚本

$(document).ready(function() {
  var productList = $("#product_list:nth-child(3n+1):visible").height(); /*$("#product_list:nth-child(3n+1):visible").each(function(){productList += $(this).height();});*/
  var counter = 0;
  //filter functions
  $("ul#filters li a.button").click(function() {
    $("ul#filters li a.button").removeClass("active");
    $(this).addClass("active");

    if ($(this).hasClass("active") == true) {

      var act = $(this).attr("id");

      $(".product:not(#" + act + ")").fadeOut(800);
      $(".product#" + act + "").fadeIn(800);
      $(".products .product:nth-child(4n+1)").css("border-left-width", 0);
      $("#product_list:last-child:visible").css("border-right", "2px dashed #008140");

      if (act == "all") {
        $(".product").fadeIn(800);
      } else {
        if ($(".product:last:visible") >= $(".product:last")) {
          //$("#loadmore").css("display", "none");
          $(".product:last:visible").css("border-right", "2px dashed #008140");
        }
      }
    }
  });
  //show more -show less
  $("#loadmore").click(function showNext() {
    $("#product_list").animate({
      height: productList + 3000
    }, 800);
    $(".product:hidden:lt(20)").slideDown();
    $("#showless").css("display", "block");
    counter = counter + 20;
    productList = productList + 3000;

    if ($(".product:last").is(":visible")) {
      $("#product_list").css("max-height", (productList - 2300));
      $("#product_list:last-child:visible").css("border-right", "2px dashed #008140");
      $("#loadmore").css("display", "none");
    }
    if ($("."))
  });

  $("#showless").click(function showLess() {
    //$(".product:visible:gt("+(counter-1)+")").slideUp()
    $("#product_list").animate({
      height: productList - 3000
    }, 800);
    counter = counter - 20;
    productList = productList - 3000;

    if (productList == 3000) {
      $("#showless").css("display", "none");
    }
    if ($("#loadmore").css("display", "none")) {
      $("#loadmore").css("display", "block");
    }
  });
});

产品HTML

<div class="container">
  <!-- Row -->
  <div class="row" id="product_list">
    <!-- Product -->
    <div class="col-xs-6 col-sm-3 product" id="belleza">
      <!-- Entry -->
      <div class="entry">
        <figure class="entry-thumbnail">
          <a href="#"><img alt="" src="../resources/images/productos/Shampoo-neutro.png"/></a>
        </figure>
        <div class="entry-body">
          <h3 class="entry-title">
            <a href="#">Shampoo Petra Neutro<br/></a>
          </h3>
          <h2 class="entry-title">
            <select id="presentaciones">
              <option id="shampoo-neutro260">Frasco Dosificador x260ml</option>
            </select>
          </h2>
          <h2 class="entry-title" id="disponible">Disponibles: <span class="unidades" id="shampoo-neutro">10</span>
          </h2>
          <span class="price"><ins><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>12.00</span></ins>
          <del><span class="woocommerce-Price-amount amount"><span class="woocommerce-Price-currencySymbol">$</span>15.00</span></del></span>
          <div class="buttons">
            <a class="button add_to_cart_button" rel="nofollow">Add to cart</a>
          </div>
        </div>
      </div>
      <!-- End Entry -->
    </div>
    <!--End Col -->
  </div>
</div>

Frasco剂量计x260ml
争议事项：10
$12.00
$15.00
添加到购物车

我重新格式化了你的JS，但是你的HTML对于我用来理解的在线工具来说不够有效。如果你想方便回答的话，你可能需要自己清理一下。事实上，它很难辨认。谢谢，我试着重新格式化了一点HTML，但是它对于上下文来说是非常有用的，我遇到的真正问题是javascript/j查询部分。@1252748