Question

我在使用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();

    });

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

Answer 1

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

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

Answer 2

您可以使用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;
};

这段代码：

$('#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; }

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

用可扩展的盒子制作网格

2 个答案: