Question

enter image description here

Hello Stackoverflowers，

此图片在列表项目中显示产品图片及其说明（在ul li）。

我正在努力管理描述的高度，与产品图片的高度相同。

意思是：在图像中，

例如：In＆＃34; Accufitness Accumeasure Body Fat Caliper＆＃34;产品：

我想显示从第一个li到第三个或第四个li的产品描述[取决于图像高度（注意：每个图像都有固定的高度）]，剩下的li会被隐藏我希望有一个＆＃34;查看更多＆＃34;链接显示剩余列表。当用户点击＆＃34;查看更多＆＃34;链接，隐藏列表应该显示，当他们点击＆＃34; Less＆＃34;应隐藏链接，列表（剩余的li元素）。

那么，如何使用jquery根据图像高度管理描述高度，还是可以建议其他方式？

请帮帮我。

先谢谢。

Answer 1

我希望我理解你。我认为您应该将列表添加到div，然后将其与height相同，然后将图片设置为overflow至hidden。

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

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

Answer 2

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

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

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

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;}

工作小提琴就在这里：http://jsfiddle.net/hBjmU/25/

如何管理列表高度？

3 个答案: