如何根据li消耗的行显示列表中有限数量的项目

Question

I am using a bulleted list to show only limited number of items without scrollbar in 'UL' on page loads and then on click of a 'more' button, I want to show the rest of item with scrollbar in UL , for that purpose, I have use following code that works fine: 我使用项目符号列表在页面加载时仅显示有限数量的项目，而在“ UL”中没有滚动条，然后单击“更多”按钮，我想在UL显示具有滚动条的其余项目，为此，我使用下面的代码可以正常工作：

<body onload="resetPops();">
<form id="form1" runat="server">
<div class="info2-wrapper">
    <div class="info2">
        <asp:BulletedList ID="listACB" runat="server" />
        <%  const Int16 numACB = 2;
            if (listACB.Items.Count > numACB)
            {
        %>
        <div class="more">
            <% =(listACB.Items.Count - numACB) %>
            more</div>
        <div class="less">
            Collapse</div>
        <% } %>
    </div>
</div>
</form>
</body>

in code behid, I bind the list as: 在隐藏代码中，我将列表绑定为：

protected void Page_Load(object sender, EventArgs e)
    {
        listACB.DataSource = GetCategoryBoxItems();
        listACB.DataBind();
        foreach (ListItem item in listACB.Items)
        {
            item.Attributes.Add("class", "detail bullet");
        }
    }

    private object GetCategoryBoxItems()
    {
        return new List<String>
        {
            "abc",
            "Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nam cursus. Morbi ut mi. ",
            "pqr",
            "xyz",
            "Lorem ipsum dolor sit am"
        };
    }

JS code is like: JS代码类似于：

function resetPops() {
        $('.info2, .info2 ul').removeClass('expanded');
        $('.more').show();
        $('.less').hide();
    }
    $(document).ready(function () {
        $('.info2 .more').click(function () {
            resetPops();
            $('.info2, .info2 ul').addClass('expanded');
            $('.more, .less').toggle();
        });
        $('.info2 .less').click(function () {
            $('.expanded').scrollTop(0);
            resetPops();
        });
    });

This code is working good for the number of items in the list, but problem is that when any list item is getting into more than one lines, last items are not visible.(as height of ul is fixed).This scenario comes when we see it on lower resolution, in this case, few list items get into more than one line and due to which last items are not visible. 该代码对列表中的项目数有效，但是问题是当任何列表项进入多行时，最后一个项目是不可见的（因为ul的高度是固定的）。以较低的分辨率查看它，在这种情况下，很少有列表项进入多行并且由于最后的项不可见。

For example, as shown below, 2nd item gets into two line causing 5th list item to be hidden: 例如，如下所示，第二项进入两行，导致第五项列表项被隐藏：

•   abc
•   Lorem ipsum dolor sit amet, consectetuer 
    adipiscing elit. Nam cursus. Morbi ut mi.
•   pqr
•   xyz
•   Lorem ipsum dolor sit am

I am facing this issue because I have have handled this based of number of list items only not the number of lines in the UL . 我正面临这个问题，因为我已经根据列表项的数量（而不是UL的行数）来处理此问题。 So how can I handle this scenario that more button is shown based on number of line in the UL and number of list item both? 那么，如何处理这种情况，即根据UL的行数和列表项数同时显示more按钮？

Answer 1

demo 演示

$('li:gt(2)').hide();
$('input').click(function(){
$('li:gt(2)').show();
$('li:gt(4)').hide();
});

Answer 2

I have got the logic to find the number of items after which I can show that 'more' button. 我有逻辑来查找项目数，之后可以显示“更多”按钮。 Actually I have calculated total number of items after which I can show more button based on its height and when total height of lis exceeds height of ul then I can show that 'more' button, as: 实际上，我已经计算出项目总数，之后可以根据其高度显示更多按钮，并且当lis总高度超过ul高度时，我可以显示“更多”按钮，如下所示：

getTotalHeight = function () {
var Visibleitemsheight = 0;
var lastindex = 0;
var totalItems = 5; //five items height is 80 that is fixed
var totalheight = 80;//height is 80 that is fixed for ul
var items = $('.info2 ul li');
items.each(function (index) {
    Visibleitemsheight += $(this).height();
    lastindex = index;
    if (Visibleitemsheight >= totalheight) {
        return false;
    }
});
lastindex++;
if (Visibleitemsheight >= totalheight) {
    if (lastindex < items.length) {
        $('.more').show();
        $('.more').text((items.length - lastindex) + " more items");
    }
    else if (lastindex == items.length) {
        if (Visibleitemsheight > totalheight) {
            $('.more').show();
            $('.more').text("more...");
        }
    }
  }
}

For now its working fine, Please suggest if there is any better approach. 目前，它工作正常，请提出是否有更好的方法。 thanks!!! 谢谢！！！

如何根据li消耗的行显示列表中有限数量的项目

问题描述

2 个解决方案

解决方案1
0

解决方案2
0 已采纳 2013-08-06 13:25:16

如何根据li消耗的行显示列表中有限数量的项目

问题描述

2 个解决方案

解决方案1 0

解决方案2 0 已采纳 2013-08-06 13:25:16

解决方案1
0

解决方案2
0 已采纳 2013-08-06 13:25:16