Как управлять высотой списка?

Question

Здравствуйте Stackoverflowers,

Это изображение показывает изображение продукта и его описание в пункте списка (В ul li).

Я пытаюсь управлять высотой описания, такой же, как высота изображения продукта.

средства: В изображения,

Например: В «Accufitness Accumeasure Body Fat Суппорт» Продукт:

Я хочу показать описание продукта от первого li к третьей или четвертой li [в зависимости от изображения высота (Примечание: у каждого изображения фиксированная высота)], а оставшиеся li будут скрыты. Я хочу иметь ссылку «Показать больше», чтобы отобразить оставшийся список. Когда пользователь нажимает ссылку «Просмотреть больше», должен отображаться скрытый список, и когда они нажимают ссылку «Меньше», список должен быть скрыт (остальные li элементов).

Итак, как я могу управлять высотой описания в соответствии с высотой изображения с помощью jquery или вы можете предложить другие способы?

Пожалуйста, помогите мне.

Спасибо заранее.

Answer 1

Я надеюсь, что вы правильно поняли. Я думаю, вы должны, но список в div, затем дать ему то же самое height, то изображение и набор overflow до hidden.

Теперь вы можете использовать jQuery для изменения размера div, когда пользователь нажимает на ссылку «Просмотреть больше».

Не успевайте его протестировать, но я надеюсь, что это может вас немного улучшить.

Answer 2

Гипотетически вы можете создать div внутри li, который имеет высоту, закрепленную на высоте изображения. Вы можете сделать это либо с помощью javascript, добавив некоторый скрипт в событие onload тела, либо как переменную php, которая отражается в html.

В любом случае вам нужно будет скрыть переполнение с помощью 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/