使用可扩展框制作网格答案

【问题标题】：Making a grid with expandable boxes使用可扩展框制作网格
【发布时间】：2013-02-07 08:51:10
【问题描述】：

我在用 CSS 和 jQuery 制作的方框网格时遇到了一些问题。

问题是，当您单击它们时，这些框必须展开，而且它们确实会展开，但是当您单击最右边的一个时，它有足够的空间保持在线并向下移动。

这是我的页面：

这就是问题所在：

这是我的代码（可能不那么漂亮，但它可以完成工作）：

    $('ul#products li a').click(function() {

    //Reset
    $('ul#products li').removeClass("marked");
    $('ul#products li .product-text').hide();

    var productID = $(this).attr('name');

    $("#product-"+productID+"").addClass("marked");
    $("#product-text-"+productID+"").show();

    });

我的问题是：有没有办法让那个盒子与之前的盒子交换位置或任何其他方式来确保它保持在线？也许是一个插件？

【问题讨论】：

我知道这并没有解决您的问题，但在我看来，现在的方式看起来不错，我认为如果您实施您的要求，您会遇到更多麻烦。

标签： jquery css grid expandable

【解决方案1】：

您可以使用this blog 中的一个小 .swap() 方法：

jQuery.fn.swap = function(b){
    b = jQuery(b)[0];
    var a = this[0];
    var t = a.parentNode.insertBefore(document.createTextNode(''), a);
    b.parentNode.insertBefore(a, b);
    t.parentNode.insertBefore(b, t);
    t.parentNode.removeChild(t);
    return this;
};

还有这段代码sn-p：

$('#products').on('click', 'li', function() {
    var $this = $(this);
    if($this.index() % 4 == 0) {
        $this.swap($this.prev());
    }
    $this.addClass('marked').siblings().removeClass('marked');
});

CSS

#product li .product-text { display: none; }
#product li.marked .product-text { display: block; }

如果您还想在元素关闭时换回，则必须扩展代码...

【讨论】：

谢谢 - 成功了。我只是做了一点改动： var $this = $(this); var listID = $this.index() + 1; if(listID % 4 == 0) { （因为索引从0开始，所以我没有得到第四个li）

【解决方案2】：

一种方法是在一行中只放置三个项目，这样当它展开时它不会进入第二行。

另外一点是，如果只有三个项目，那么它会更好看，不会出现在第二行。

【讨论】：