0

箇条書きリストを使用して、ページの読み込み時に「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>

コードビハインドでは、リストを次のようにバインドします。

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 コードは次のようになります。

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();
        });
    });

このコードは、リスト内のアイテムの数に対して適切に機能していますが、問題は、リスト アイテムが複数の行にまたがる場合、最後のアイテムが表示されないことです (ul の高さが固定されているため)。低解像度で表示してください。この場合、複数の行に入るリスト項目はほとんどなく、最後の項目が表示されないためです。

たとえば、以下に示すように、2 番目の項目が 2 行になり、5 番目のリスト項目が非表示になります。

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

の行数ではなく、リスト項目の数のみに基づいてこれを処理したため、この問題に直面していULます。では、ボタンがリスト項目の数moreと行数の両方に基づいて表示されるというこのシナリオをどのように処理できますか?UL

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 に答える