优雅地调整列表项的大小答案

【问题标题】：Re sizing list items gracefully优雅地调整列表项的大小
【发布时间】：2013-07-24 21:35:23
【问题描述】：

我有一个由两列内联块列表项组成的产品列表。我希望用户能够单击这些项目并让它们展开以显示更多信息，但它并没有像我想要的那样呈现。

我正在使用简单的类切换来增加项目的宽度：

$(document).ready(function () {
$('#products').on('click', 'li', function () {
$(this).toggleClass("open")
});
});

在左侧展开一个项目会填满空间并按照我的意愿将整个区域颠倒。但是在右栏中展开一个项目会使该项目向下并留下一个空白。

这就是全部内容：

http://jsfiddle.net/MHJDB/

是否有更好的方法来构建此列表以使项目在更改大小时自然级联？

【问题讨论】：

我不确定是什么问题。你的小提琴看起来不错

标签： jquery css

【解决方案1】：

主要原因是您为每个li 使用border 属性。

在检查这个SO answer:

border css 属性会增加所有元素的“外部”尺寸，表格中的 tds 除外。

举个例子，一个div，宽高为10px，有边框 1px，外部宽度和高度为 12px。

所以我建议更换你的

border: 1px solid #eeeeee;

outline

outline: 1px solid #eeeeee;

轮廓在以下方面不同于边框：

大纲不占用空间，它们绘制在内容之上。 [为您]

轮廓可能是非矩形的。

加上那个，

margin: 5px设置一个元素的所有四个边距：

#products li {
    margin: 5px;
}

所以反而有

#products li {
     margin-bottom: 5px;  // equivalent to margin: 0px 0px 5px; 0px;
    }

检查这个Updated JSFiddle

【讨论】：

【解决方案2】：

这只是我想出的一个基于 jQuery 的解决方案。

不是完美的，但会帮助您入门。

jsfiddle 是here

jQuery:

$(document).ready(function () {
    $('#products').on('click', 'li', function () {
    $(this).toggleClass("open");

          if("open" === $(this).attr("class")) {
            if($(this).before())
              $(this).before($(this).next());
              else
              $(this).after($(this));
        }

        if("right" === $(this).css("float") ) {
        $(this).after($(this).prev());
    }      
    });
    });

在上面的代码中，如果点击的元素在右侧，它会滑动元素的位置。

希望对您有所帮助！ :-)

【讨论】：

这看起来是一个很好的解决方案，我不知道你可以使用 .before 和 .after 执行简单的重新排序