0

順序付けされていない大きなリストがあり、それぞれに写真とタイトルが含まれています。タイトルをクリックすると、コンテンツ領域が表示されます。デフォルトでは、すべてのコンテンツ領域が折りたたまれているため、各リストアイテムの高さは同じです。ここで実際の例を見ることができます：http：//trendsprintmedia.com/templates/

Jqueryは単純です：

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

（タイトルまたはプラスアイコンをクリックして）コンテンツを展開すると、すべてのコンテンツが下にスライドするのがわかります。これにより、その下のすべてのリスト項目が台無しになります。その下のリスト全体が整理されておらず、醜いです。これは避けたい。

各要素（li.singleTemp）は同じ幅であるため、タイトルをクリックすると、リストアイテムの垂直列だけが下にスライドし、残りの要素はそのまま残るjqueryソリューションを探しています。何か案は？

または、リストを展開する場合は、次の行が完全に下にスライドすると便利です。

4

1 に答える 1

0

私はあなた<div id="templates">に絶対的な位置を与え、残りの要素よりも高いz-indexを設定します。

$("h2.trigger").click(function(){
           $(this).toggleClass("activeTemp").next().slideToggle(250)
              .parent('div#templates')
              .css({position: 'absolute', z-index: '3', top: '155'});
    return false; 
});
于 2011-08-13T00:13:27.483 に答える