0

我在 CSS 和 jQuery 中制作的方框网格有点麻烦。

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

这是我的页面：

http://nxtstep.dk/test/produkter.html

这就是问题所在：

http://nxtstep.dk/test/problem.png

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

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

    });

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

4

2 回答 2

0

一种方法是在一行中仅放置三个项目，以便在展开时不会进入第二行。

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

于 2013-02-07T09:09:16.440 回答
0

您可以使用此博客中的一个小 .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; }

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

于 2013-02-07T09:19:53.653 回答