0

ここに画像の説明を入力

Stackoverflowers さん、こんにちは。

この画像は、商品画像とその説明をリスト項目 ( 内ul li) に表示しています。

商品画像の高さと同じように説明の高さを管理しようとしています。

意味：画像で、

例: 「Accufitness Accumeasure Body Fat Caliper」製品の場合:

[画像の高さに応じて (注: 各画像の高さは固定されています)] 1li番目から 3 番目または 4 番目までの製品説明を表示したいのですが、残りは非表示になります。残りのリストを表示するための「もっと見る」リンクが必要です。ユーザーが「View More」リンクをクリックすると非表示のリストが表示され、「Less」リンクをクリックするとリスト (残りの要素) が非表示になります。lilili

では、jqueryを使用して画像の高さに応じて説明の高さを管理するにはどうすればよいですか、または他の方法を提案できますか?

私を助けてください。

前もって感謝します。

4

3 に答える 3

0

仮説的には、高さが画像の高さに固定された li 内に div を作成できます。これは、本文の onload イベントにスクリプトを追加して JavaScript を使用するか、html にエコーされる php 変数として行うことができます。

いずれにせよ、css (overflow: hidden) でオーバーフローを非表示にする必要があります。

次に、誰かが「詳細」をクリックすると、javascript で固定の高さを削除し、オーバーフロー スタイルを表示に設定できます。

于 2012-06-28T12:11:06.263 に答える
0

私はあなたを正しく理解していることを願っています。私はあなたがすべきだと思いますが、リストを にしてdivから、同じものを与えてからheight、画像を に設定overflowしhiddenます。

jQuery を使用してdiv、ユーザーが [もっと見る] リンクをクリックしたときのサイズを変更できるようになりました。

まだテストする時間はありませんが、これで少し先に進むことができることを願っています.

于 2012-06-28T12:07:31.383 に答える
0

このように div 内にリストを追加し、ボタンを追加します。

<div class="container">
<ul>
    <li>Here is some text, Here is some text</li>
    <li>Here is some text, Here is some text</li>
    <li>Here is some text, Here is some text</li>
    <li>Here is some text, Here is some text</li>
    <li>Here is some text, Here is some text</li>
    <li>Here is some text, Here is some text</li>
    <li>Here is some text, Here is some text</li>
    <li>Here is some text, Here is some text</li>
    <li>Here is some text, Here is some text</li>
    <li>Here is some text, Here is some text</li>
</ul>

</div><input type="button" class="seemorelinks" value="see more" onclick="$('.container').height('100%'); this.style.display='none';" />

これをcssに追加します

.container{ position:relative; height:40px; overflow:hidden;}​

ワーキングフィドルはこちら：http://jsfiddle.net/hBjmU/25/

于 2012-06-28T12:23:41.260 に答える