Question

我想动态地将项目添加到列表中。列表的高度应该与项目一样高。但在某个时刻，它是300px，ul应该停止“增长”......我用“max-height”做到了这一点。到现在为止还挺好。现在我有一个滚动条我想添加一个调整大小功能，以便用户可以决定它是否大于最大高度。

问题是它无法调整大小超过最大高度。有人知道怎么做这个吗？最好的方法？

HTML：

<a href="#">click to add</a>

<ul>
    <li>start</li>
</ul>

的CSS：

ul {
    background: #f2f2f2;
    overflow: auto;
    height: auto;
    max-height: 300px;
    resize: vertical;
}

JS / jquery的：

$('a').on('click', function (e) {
    e.preventDefault();
    $('ul').append('<li>item</li>');
});

在操作中看到它是同样的小提琴：http://jsfiddle.net/ZwrzX/ 提前thx！

Answer 1

工作小提琴： http://jsfiddle.net/ZwrzX/4/

当UL高度达到290px时，添加项目链接旁会显示一个链接，用户可以点击该链接将25px添加到max-height { {1}}，如果用户点击2次，UL（2 x 50px）会添加到25px的{{1}}。

HTML

max-height

的JavaScript

UL

CSS

<a href="#" id="addItem">click to add item</a>
<a href="#" id="addHeight">Add 25px to UL Max height</a>
<ul>
    <li>start</li>
</ul>

Answer 2

确定。我自己再次尝试，并得出以下结论：

var max_h = $('ul').css('max-height').replace('px', '');

function check_height() {
    var sum = 0;
    $('li').each(function () {
        sum += $(this).height();
    });
    if (sum >= max_h) $('ul').css({ 'height': max_h, 'max-height': sum });
    else $('ul').css({ 'height': 'auto', 'max-height': max_h });
}

$('#addItem').on('click', function (e) {
    e.preventDefault();
    $('ul').append('<li>item</li>');

    check_height();
});

$('#removeItem').on('click', function (e) {
    e.preventDefault();
    $('li').last().remove();

    check_height();
});

小提琴：http://jsfiddle.net/ZwrzX/6/

我在问是否有更清洁的解决方案。或者js少的解决方案？任何进一步的想法？

css resize：如何在最大高度激活后调整动态增长div的大小

2 个答案: