php - 如何管理列表高度？

Question

你好 Stackoverflowers，

ul li此图像在列​​表项 (In )中显示产品图像及其描述。

我正在尝试管理与产品图像高度相同的描述高度。

表示：在图像中，

例如：在“Accufitness Accumeasure 体脂卡尺”产品中：

我想从第一li到第三或第四显示产品描述li[取决于图像高度（注意：每个图像都有固定的高度）]，其余的li将被隐藏。我想要一个“查看更多”链接来显示剩余的列表。当用户单击“查看更多”链接时，应显示隐藏列表，当他们单击“更少”链接时，li应隐藏列表（剩余元素）。

那么，如何使用 jquery 根据图像高度管理描述高度，或者您能建议其他方式吗？

请帮我。

提前致谢。

Answer 1

在这样的 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/

Answer 2

我希望我理解你的正确。我认为您应该将列表放入一个div，然后将其与height图像相同并设置overflow为hidden。

现在您可以使用 jQuery 来更改div用户单击“查看更多”链接时的大小。

还没有时间测试它，但我希望这能让你更进一步。

Answer 3

假设您可以在 li 内创建一个 div ，其高度固定在图像的高度。您可以通过在正文的 onload 事件中添加一些脚本来使用 javascript 来执行此操作，或者作为回显到 html 中的 php 变量来执行此操作。

无论哪种方式，您都需要使用 css 隐藏溢出（溢出：隐藏）。

然后，一旦有人点击“更多”，您可以通过javascript删除固定高度并将溢出样式设置为可见。