3

我想动态地将项目添加到列表中。列表的高度应该与项目一样高。但在某个点，它是 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 提前！

4

2 回答 2

0

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

当UL高度达到时290px，在添加项目链接旁边会出现一个链接，用户可以点击它添加25px到 的max-height中UL，如果用户单击 2 次，则50px(2 x 25px) 会添加到 的max-height中UL。

HTML

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

JavaScript

$('#addItem').on('click', function (e) {
    e.preventDefault();
    $('ul').append('<li>item</li>');
    if ($('ul').height() > 290) {
        $('#addHeight').css('visibility', 'visible');
    }
});

$('#addHeight').on('click', function() {
    var currenULtHeight = $('ul').height();
    $('ul').css('max-height', currenULtHeight + 25 + 'px')
});

CSS

ul {
    background: #f2f2f2;
    overflow: auto;
    height: auto;
    max-height: 300px;
    resize: vertical;
}
#addHeight {
    visibility: hidden;
}
于 2013-05-06T07:39:05.623 回答
0

好的。我自己再次尝试并得出以下结论：

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少的解决方案？任何进一步的想法？

于 2013-05-06T08:00:55.730 回答