适配Div列表的Show More/Less按钮高度计算异常问题咨询

问题根源 #

你代码的核心偏差来自3个基础错误：

• JS的点击事件选择器写错，按钮不在.list-body容器内，事件根本没有绑定成功
• 高度计算时选择的是p:not('.show-more')，但你实际需要统计高度的是.list-body下的所有.item div元素
• CSS类选择器和HTML结构不匹配，渐变遮罩的定位逻辑完全不生效

修正后可直接运行的完整代码 #

JS代码

var $el, $listBody, totalHeight;

$(".button").click(function() {
  totalHeight = 0;
  $el = $(this);
  $listBody = $el.parents(".container").find(".list-body");
  
  // 计算所有item的总高度，包含margin避免偏差
  $listBody.find(".item").each(function() {
    totalHeight += $(this).outerHeight(true);
  });

  // 支持展开/收起双向切换
  if($listBody.hasClass("expanded")) {
    $listBody.animate({
      "height": 300
    }, function() {
      $listBody.removeClass("expanded").css("max-height", "300px");
    });
    $el.text("Show More");
  } else {
    $listBody.css({
      "height": $listBody.height(),
      "max-height": "none"
    }).animate({
      "height": totalHeight
    }).addClass("expanded");
    $el.text("Show Less");
  }
  return false;
});

CSS代码

.list-body {
  max-height: 300px;
  position: relative;
  overflow: hidden;
}
/* 渐变遮罩放到列表容器内部，避免层级错位 */
.list-body .fade-mask {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background-image: linear-gradient(to bottom, transparent, #fff);
  pointer-events: none;
}
.show-more-wrap {
  text-align: center;
  padding: 10px 0;
}

HTML代码

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
  <div class="header">
    Header Info
  </div>
  <div class="list-body">
    <div class="item">
      Item #1
    </div>
    <div class="item">
      Item #2
    </div>
    <div class="item">
      Item #3
    </div>
    <div class="item">
      Item #4
    </div>
    <div class="fade-mask"></div>
  </div>
  <p class="show-more-wrap">
    <a href="#" class="button">Show More</a>
  </p>
</div>

主要改动说明 #

• 修正了事件绑定选择器，避免层级匹配错误
• 高度计算改为遍历所有.item元素，outerHeight(true)会自动包含元素margin值，计算精度更高
• 新增了收起逻辑，点击按钮可在显示/隐藏之间双向切换
• 调整了渐变遮罩的结构位置，避免样式错位
• 统一了类名命名，消除CSS选择器不匹配的问题

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