Альтернатива jquery Masonry со многими элементами списка

У меня есть большой неупорядоченный список, каждый из которых содержит изображение и заголовок. При нажатии на заголовок открывается область содержимого. По умолчанию все области содержимого свернуты, поэтому каждый элемент списка имеет одинаковую высоту. Вы можете просмотреть рабочий пример здесь: http://trendsprintmedia.com/templates/

Jquery прост:

$(".tempContainer").hide();
$("h2.trigger").click(function(){
    $(this).toggleClass("activeTemp").next().slideToggle(250);
return false; 
});

Когда вы расширяете содержимое (нажав на заголовок или значок плюса), вы увидите, что все содержимое скользит вниз. Это испортит все элементы списка под ним. Весь список под ним становится неорганизованным и… ну, уродливым. Я хочу избежать этого.

Поскольку каждый элемент (li.singleTemp) имеет одинаковую ширину, я ищу решение jquery, в котором при нажатии на заголовок только этот вертикальный столбец элементов списка скользит вниз, а остальные элементы остаются на месте. Любые идеи?

В качестве альтернативы, если вы расширяете список, было бы здорово, если бы следующая строка полностью скользила вниз.


jquery listitem jquery-masonry
person JCHASE11    schedule 13.08.2011    source источник
comment
Я решил расположить каждую ul абсолютно так, чтобы она скользила поверх всего. Это решает мою проблему!   -  person JCHASE11    schedule 13.08.2011
comment
Ха! это было немного элегантнее, чем мое решение   -  person Amin Eshaq    schedule 13.08.2011

Ответы (1)


arrow_upward
0
arrow_downward

я бы дал вашему <div id="templates"> позицию абсолютной и установил z-индекс выше, чем у остальных элементов.

$("h2.trigger").click(function(){
           $(this).toggleClass("activeTemp").next().slideToggle(250)
              .parent('div#templates')
              .css({position: 'absolute', z-index: '3', top: '155'});
    return false; 
});
person Amin Eshaq    schedule 13.08.2011
comment
да, это то, что я сделал в соответствии с моим комментарием выше... спасибо! - person JCHASE11; 13.08.2011