0

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

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

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

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

这是整个事情：

http://jsfiddle.net/MHJDB/

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

4

2 回答 2

0

主要原因是您border为每个li.

在检查这个SO 答案时：

边框 css 属性将增加所有元素的“外部”大小，表格中的 tds 除外。

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

所以我建议更换你的

border: 1px solid #eeeeee;

带轮廓

outline: 1px solid #eeeeee;

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

  • 大纲不占用空间，它们绘制在内容之上。[为你]
  • 轮廓可以是非矩形的。

加上那个，

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

#products li {
    margin: 5px;
}

所以反而有

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

检查这个更新的 JSFiddle

于 2013-07-25T06:30:58.527 回答
0

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

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

jsfiddle 在这里

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

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

希望能帮助到你！:-)

于 2013-07-25T07:48:32.530 回答