productLayout私の全体的な目標は、 DIV内に複数の製品写真を表示する製品ページを持つことから始まります。pL100次に、その DIV 内のリンクは、DIV内に隠されている非表示のコンテンツを表示するために DIV の幅を拡張するクラスを追加しhiddenます。次に、最初の製品画像を非表示にして、非表示の DIV を表示したいと思います。その非表示の DIV 内で、その DIV を再び非表示にして、写真を含む元の DIV を取り戻すためのリンクが必要です。ただし、誰かが別の製品をクリックしてその製品を展開するかどうかに基づいて、これらすべてを切り替える必要があります。彼らがそうするなら、オープンDIVがpL100クラスを削除して、最初のように表示されるようにしたいと思います。
現時点では、別の DIV がクリックされたときに、他の DIV を閉じるためにすべてのトグル ダウンがあります。ただし、初期コンテンツを非表示にしたり、非表示のコンテンツ内にリンクを追加して、追加されたクラスを削除して通常に戻すには助けが必要です。他の DIV がクリックされると、そのすべてがトグルされるだけでなく。
また、DIV の「拡大」と「終了」をアニメートして、それほど急激にならないようにしたいと考えています。と を使用しているので、それができるかどうかはわかりませんがaddClass、removeClassすべて異なる方法で行う方法があれば、その方法を知りたいです。
お気づきの場合は、DIVにうまく収まるようproductLayoutに、右側のマージンを削除するために4 番目の DIV ごとに呼び出しています。ただし、DIV をクリックすると、すべての DIV が下にシフトしますが (これが必要です)、4 番目の DIV が次の DIV に対してプッシュされます。マージンを追加してから、その行の新しい 4 番目の DIV に適用する方法はありますか?.productLayout:nth-of-type(4n+0)containerproductLayoutproductLayoutproductLayout
これがすべて理にかなっていることを願っています。明確でない場合は申し訳ありません。何かお役に立てば幸いです。何か間違ったことをしている場合は、アドバイスをお願いします。どうもありがとう。
ここにフィドルがあります - http://jsfiddle.net/pT3DC/
Javascript
$(document).ready(function () {
$('.productLayout a').on('click', function(){
$(this).closest('div').toggleClass('pL100').siblings().removeClass('pL100');
$(this).closest('div').children('.hidden').toggleClass('hide').siblings().removeClass('hide');
});
});
HTML
<div class="container">
<div class="productLayout">
<p><a href="#" class="showMore">Show More 1</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 2</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 3</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 4</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 5</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 6</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 7</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
<div class="productLayout">
<p><a href="#" class="showMore">Show More 8</a></p>
<div class="hidden hide">this is hidden content</div>
</div>
</div>
CSS
.container {
width: 1000px;
padding: 0px 16px;
}
.productLayout {
width: 228px;
float: left;
margin: 0px 16px 16px 0px;
text-align: center;
border: 1px solid #333333;
}
.productLayout:nth-of-type(4n+0) {
margin-right: 0px;
}
.pL100 {
width: 936px;
padding: 16px;
color: #000000;
float: left;
margin: 0px 16px 16px 0px;
text-align: center;
border: 1px solid #333333;
}
.hide {
display:none;
}
.hidden {
clear: both;
width: 100%;
background-color: #000000;
color: #FFFFFF;
}
ここにフィドルがあります - http://jsfiddle.net/pT3DC/