目標:
ロゴ画像がクリックされたときに「company-content」を fadeIn()し、「 tiles -wrapper」DIV 内の他のすべてのコンテンツをフェードアウトする。COMPANY CONTENT は、完全な「タイル ラッパー」表示 DIV と同じ幅になります。
THEN...
「会社のコンテンツ」が表示されたら、BACK リンクでページを元の状態に戻します。
'company-logos' と 'company-content' (= 'li.content-wrapper' のアイデアを捨てる) に対して、投稿されたコードに対して一意のクラス名を持つ 2 つの別々の UL を使用する必要がありますか?
**私は実際にこれを以前に行ったことがあります。気がおかしくなりそうだ。どうやってこれをしたのか思い出せません。任意の提案をいただければ幸いです。*
<div class="tiles-wrapper">
<ul class="tiles-list">
<li class="company-wrapper">
<div class="company-logo"><a class="company-logo-btn" href="#"><img src="company1.png" alt="" border="0" /></a></div>
<div class="company-content">
<h1>Company 1</h1>
<div class="goback"><a class="goback-btn" href="#">← BACK TO ALL</a></div>
</div>
</li>
<li class="company-wrapper">
<div class="company-logo"><a class="company-logo-btn" href="#"><img src="company2.png" alt="" border="0" /></a></div>
<div class="company-content">
<h1>Company 2</h1>
<div class="goback-btn"><a class="goback-btn" href="#">← BACK TO ALL</a></div>
</div>
</li>
<li class="company-wrapper">
<div class="company-logo"><a class="company-logo-btn" href="#"><img src="company3.png" alt="" border="0" /></a></div>
<div class="company-content">
<h1>Company 3</h1>
<div class="goback-btn"><a class="goback-btn" href="#">← BACK TO ALL</a></div>
</div>
</li>
</ul>
</div>
...さらに行を追加するためにPHPでループします...