Выявить скрытые элементы в jQuery

Question

Мне нужно, чтобы div показал первые три элемента в списке, если этот список больше трех, я бы хотел, чтобы кнопка раскрывалась, чтобы раскрыть все элементы. Я могу узнать, сколько элементов будет в списке через PHP, но это число может быть от 0 до 30.

<style type="text/css">
    .box {
        height: 80px;
        overflow: hidden;
    }
    .box li {
        height: 20px;
        background: red;
    }
</style>

<div class="box">
    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li> 
        <li>Item 4</li> 
    </ul>   
</div>
<a href="#show-all">Show All</a>

Есть ли способ, которым я могу автоматически найти правильную высоту, до которой нужно увеличить div? или есть способ, которым я могу просто позволить jQuery расширять div, пока все элементы списка не будут видны?

Answer 1

Вы должны быть в состоянии прочитать высоту ul все еще

alert($(".box ul").height());

должен дать вам высоту, независимо от того, какая высота у div.

Так что вы могли бы сделать

$(".box").animate({ height: $(".box ul").height()+"px" });

Answer 2

Вы можете не установить атрибуты для переполнения: скрытые для начала. Запишите высоту под нагрузкой. Затем установите CSS для переполнения до дальнейшего уведомления.

/* I believe boxHeight will take the value of .height() in this case */
var boxHeight = $("#myBox").height().css({"height":"100px","overflow":"hidden"});

Answer 3

Я реализовал нечто очень похожее месяц назад.

Если у вас просто для начала есть только три элемента списка и добавить остальные при нажатии кнопки «Показать все», он автоматически изменит свой размер. Вам нужно будет удалить 'overflow: hidden', хотя.