使用可扩展框制作网格

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

    });

我的问题我s：有没有办法让那个盒子开关在那之前或者其他任何方式来确保它保持在它的线上？也许是一个插件？

来源

2013-02-07 Rasmus Wølk

我知道这不是解决你的问题，但对我来说，它现在看起来不错，我认为如果你实现你的要求，你会遇到更多的麻烦。 – kleinfreund

你可以使用一个小.swap（）方法this blog：

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-07 09:19:53 Simon

谢谢 - 工作。我只做了一点改变： var $ this = $（this）; var listID = $ this.index（）+ 1; if（listID％4 == 0）{ （因为索引从0开始，所以我没有得到第四个li） –

哦，当然... – Simon

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

另一种情况是，如果只有三件物品在那里，它会看起来更好，不会在第二行。

来源

2013-02-07 09:09:16

使用可扩展框制作网格

回答

相关问题