如何管理列表高度？

Question

​

​

你好，Stackoverflowers，

此图像在列表项(ul li格式)中显示产品图像及其说明。

我试着把描述的高度和产品形象的高度统一起来。

意思:在图像中，

例如:在“健身运动体脂卡尺”产品中：

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

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

请帮帮我。

提前谢谢。

Answer 1

我希望我没听错。我认为您应该将列表转换为div，然后给它相同的height，然后是图像，并将overflow设置为hidden。

现在，当用户单击"View More“链接时，可以使用jQuery更改div的大小。

我还没有时间来测试它，但我希望这能让你走得更远。

Answer 2

假设您可以在li中创建一个div，它的高度固定为图像的高度。您可以使用javascript在body的onload事件中添加一些脚本，也可以将其作为php变量回显到html中。

无论采用哪种方式，您都需要使用css ( overflow : hidden)隐藏溢出。

然后，一旦有人点击“更多”，你就可以通过javascript移除固定的高度，并将overflow样式设置为可见。

Answer 3

像这样将列表添加到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;}​

Working fiddle在这里：http://jsfiddle.net/hBjmU/25/