画像とテキストのグリッドがあります。デフォルトでは、画像のみが表示されます。ユーザーが画像をクリックすると、他の画像の上に展開され、テキストが表示されます。現在、部分的に機能しています。
<div id="container">
<div class="logo">
<img src="http://www.bnl.gov/today/intra_pics/2012/01/Intel-Logo-110px.jpg" alt="">
<p class="logotext">
...
</p>
</div>
....
一番上の行の一番左のアイコンをクリックすると、私のやりたいことが実行されます。ただし、いくつかの問題があります。
- いずれかのアイコンをクリックすると、クリックされた要素は絶対配置のためにその場所から移動するため、他の要素は左上隅に 1 つ近づきます。すべての要素に同じ画像を使用したため、スライド効果は JSFiddle の例には実際には現れません。
- 他のアイコンをクリックすると、一番上の行の左端に移動することを除いて、正しく展開されます。左端まで拡大する必要があります (現在のように) が、それ以上に拡大する必要があります。クリックしたアイテムが行の最初のアイテムでない場合でも、左に同じ量だけ拡大する必要があります。もう一度クリックすると、元の位置に戻ります。
- 同時に複数開くことができるはずです。1 つを開いて別の要素を開くと、前に開いた要素はデフォルトの状態に折りたたまれます。
私はこれを長い間台無しにしてきました。ヘルプを取得し、これを機能させるのに十分な詳細を提供できたことを願っています。