Oto skrzypce, którego modyfikacja, której potrzebuję: http://jsfiddle.net/wp2e4/

Więc kiedy klikamy pudełko, rozszerza się. Po kliknięciu innym polu rozszerza się również. Ale, czego potrzebuję, to po kliknięciu jednego pudełka i jest już rozszerzone pudełko, poprzednio rozszerzone pudełko powinno zawierać, tj. Istnieje tylko jeden rozszerzony pudełko na raz.

Rozmowa w kategoriach klas, gdy jest już duży duży div, a następnie, klikając mały div, duży duży {x2}} powinien zamknąć.

Jak mogę to zrobić?

2
Ranveer 25 listopad 2013, 21:52

2 odpowiedzi

Najlepsza odpowiedź

Próbować:

$('.brick').click(function () {
    $this = $(this);
    if ($($this).hasClass("large")) {} else {
        if ($(".gridly").find(".large").length > 0) {
            var large = $(".gridly").find(".large");
            $(large).toggleClass("large small");
            size = 140;
            $(large).data('width', size);
            $(large).data('height', size);
        }
    }
    $this.toggleClass('large small');
    size = $this.hasClass('small') ? 140 : 300;
    $this.data('width', size);
    $this.data('height', size);
    return $('.gridly').gridly('layout');
});

Zaktualizowany skrzypce tutaj.

2
Hiral 25 listopad 2013, 18:04

demo

Musisz zaktualizować inne .bricks na kliknięcie

var _collapse = ($this.hasClass('large')) ? 1 : 0;

if (_collapse > 0) {
    $this.removeClass('large')
        .addClass('small')
        .data('width', 300)
        .data('height', 300);
} else {
    $('.brick.large')
        .removeClass('large')
        .addClass('small')
        .data('width', 140)
        .data('height', 140);
    $this.toggleClass('large').toggleClass('small');
}
3
kei 25 listopad 2013, 18:42