Question

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

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

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

扩展左侧的项目填充空间并按照我的意愿将整个地块颠簸。但是，在右栏中展开项目会使该项目失效并留下空隙。

以下是整个事情：

http://jsfiddle.net/MHJDB/

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

Answer 1

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

检查此SO answer：

边框css属性会增加所有元素“外部”大小，   除了桌子上的tds。

就像一个例子，一个宽度和高度为10px的 div和一个边框   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

Answer 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());
    }      
    });
    });

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

希望它有所帮助！： - ）

正确调整列表项的大小

2 个答案: