0

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:

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

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.

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

4

2 回答 2

0

我有逻辑找到可以显示“更多”按钮的项目数量。实际上，我已经计算了项目总数，之后我可以根据其高度显示更多按钮，当总高度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...");
        }
    }
  }
}

目前它工作正常，请建议是否有更好的方法。谢谢！！！

于 2013-08-06T13:25:16.330 回答
0

演示

$('li:gt(2)').hide();
$('input').click(function(){
$('li:gt(2)').show();
$('li:gt(4)').hide();
});
于 2013-08-06T10:15:39.527 回答