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-heightUL,如果用户单击 2 次,则50px(2 x 25px) 会添加到 的max-heightUL

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