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

このブログの小さな.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 に答える
0

1 つの方法は、1 行に 3 つの項目のみを配置して、展開したときに 2 行目に移動しないようにすることです。

もう 1 つの問題は、アイテムが 3 つしかない場合は見栄えが良くなり、2 行目には表示されないことです。

于 2013-02-07T09:09:16.440 に答える