확장 가능한 상자로 격자 만들기

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

    });

내 질문 i s : 어쩌면 그 상자가 그 앞에 또는 그 다른 방법으로 그것의 선에 머무르는 것을 확인하기 전에 스위치 장소를 만드는 방법이 있습니까? 어쩌면 플러그인일까요?

출처

2013-02-07 Rasmus Wølk

나는 이것이 당신의 문제를 다루는 것이 아니라는 것을 알고있다. 그러나 그것은 나에게 그것은 지금의 모습처럼 보이고, 나는 당신이 요구 한 것을 구현한다면 더 어려워 질 것이라고 생각한다. – kleinfreund

당신은 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; }

요소가 닫히면 다시 코드를 확장해야합니다.

출처

2013-02-07 09:19:53 Simon

감사합니다. 방금 조금씩 변경했습니다. var $ this = $ (this); var listID = $ this.index() + 1; if (listID % 4 == 0) { (인덱스가 0부터 시작하므로 4 번째를 얻지 못했습니다.) –

아, 물론 ... – Simon

한 가지 방법은 하나의 행에 세 개의 항목 만 넣으면 확장 할 때 두 번째 줄에 표시되지 않도록하는 것입니다.

다른 점은 세 개의 항목 만 있으면 더보기 좋고 두 번째 줄에 표시되지 않는다는 것입니다.

출처

2013-02-07 09:09:16

확장 가능한 상자로 격자 만들기

답변

관련 문제