点击时可折叠div高度异常：折叠后仍保留展开高度

你碰到的这个问题很典型：点击展开列表项后，关闭时预览层虽然收起来了，但对应的<li>元素却一直保持着展开时的高度，没能恢复到初始状态。我仔细看了你的代码片段，问题主要出在关闭逻辑中恢复初始高度的环节，下面给你一步步分析和修复方案：

问题根源分析 #

从你的JavaScript代码里的close方法来看，虽然尝试用$expandedItem.css('height', $expandedItem.data('height'))来恢复初始高度，但可能存在以下几个问题：

• 初始时没有给<li>元素正确存储原始高度值，导致data('height')为空或不正确
• 过渡动画结束后没有清除行内的height样式，CSS默认高度无法生效
• 依赖this.expandedIdx获取展开项可能存在索引偏差，导致操作对象错误

具体修复步骤 #

1. 初始化时存储每个列表项的原始高度 #

在你的初始化逻辑（比如init函数或者addItems函数）中，添加代码给每个<li>存储初始高度：

// 假设$items是所有li元素的jQuery对象
$items.each(function() {
  // 存储初始高度到data属性，用outerHeight确保包含内边距等
  $(this).data('height', $(this).outerHeight());
});

这样后续关闭时就能准确拿到每个列表项的原始高度值。

2. 修改close方法中的恢复逻辑 #

更新close方法里的代码，确保准确操作当前展开的列表项，并在过渡结束后清除行内高度样式：

close: function () {
  var self = this, 
      onEndFn = function () {
        if (support) {
          $(this).off(transEndEventName);
        }
        self.$item.removeClass('og-expanded');
        // 清除行内height样式，让CSS默认高度生效
        $(this).css('height', '');
        self.$previewEl.remove();
      };

  setTimeout($.proxy(function () {
    if (typeof this.$largeImg !== 'undefined') {
      this.$largeImg.fadeOut('fast');
    }
    this.$previewEl.css('height', 0);
    
    // 直接使用self.$item（当前展开的项），避免索引偏差
    self.$item.css('height', self.$item.data('height')).on(transEndEventName, onEndFn);
    
    if (!support) {
      onEndFn.call();
    }
  }, this), 25);
  return false;
},

3. 额外验证：检查过渡事件绑定是否正常 #

如果你的浏览器不支持CSS过渡（support为false），确保onEndFn能被直接调用，避免样式无法清除的情况。

测试验证 #

修复后可以按以下步骤测试：

• 点击展开某个列表项，确认高度正确展开
• 点击关闭，观察<li>元素的行内height样式是否被清除，高度是否恢复到初始状态
• 可以在浏览器控制台中手动打印$('li').data('height')，确认每个项的初始高度都正确存储

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