Question

我有这个方便的代码段[见下文]，它使用jQuery将一组列表项截断为给定的数量。但是，我坚持如何修改此脚本以在页面上的多个列表上工作。你能帮忙吗？

假设我在页面上有5个包含100个项目的列表。如何动态隐藏每个列表中的各种列表项？

以下是目前的工作方式（每页一个列表）：

<script>
function ShowItems() {
    if (Count > $("ul.truncateList > li").size()) { Count = $("ul.truncateList > li").size() };
    $("ul.truncateList > li:lt(" + Count + ")").show();
    $("ul.truncateList > li:gt(" + (Count - 1) + ")").hide();
}

(function($){
    var listItems = $('ul.truncateList').data('listItems');
    Count= listItems;
    ShowItems();
    $('.listHide').toggle();
    $('.listShow').click(function(){
        Count = 100000;
        ShowItems();
        $('.listShow').toggle();
        $('.listHide').toggle();
    });
    $('.listHide').click(function(){
        Count = listItems;
        ShowItems();
        $('.listShow').toggle();
        $('.listHide').toggle();
    });

})(jQuery);
</script>

用法：

<ul class="truncateList" data-listItems="25">
    <li>One</li>
    ....
    <li>Twenty Six</li>
</ul>
<span class="listShow">View All</span>
<span class="listHide">View Less</span>

第二十六个列表项（及更高版本）将被隐藏，直到单击“查看全部”。但是如果我在同一页面上使用类“truncateList”放置第二个列表，它将无效。

对于视觉上隐藏长列表的整个挑战，我肯定愿意接受更优雅的解决方案，直到用户想要阅读更多（100％客户端）。

Answer 1

对于多个列表，eack使用它自己的“显示/隐藏”，合并这些2个跨度并在每个列表之后放置一个控件，如下所示：

<ul class="truncateList" data-list-items="2">
    <li>One</li>
    ...
</ul>
<button class="ShowHideFullLists" type="button">View All</button>

<h2>Second list:</h2>
<ul class="truncateList" data-list-items="4">
    <li>A 1</li>
    ...
</ul>
<button class="ShowHideFullLists" type="button">View All</button>

然后以下代码将起作用。 See it in action at jsFiddle.

$('.ShowHideFullLists').click (ShowHideFullLists);
$('.ShowHideFullLists').click ();  //-- Init list displays.

function ShowHideFullLists () {
    var showHideBtn = $(this);
    var bShowEm     = showHideBtn.data ('bShowEm')  ||  false;

    /*--- Find the list for this button. It is a previous sibling,
        in the HTML.
    */
    var thisBtnsList    = showHideBtn.prev ("ul.truncateList");

    //--- Show either all or the # from the data-list-items attribute.
    ShowItems (thisBtnsList, bShowEm, thisBtnsList.data('listItems'));

    //--- Update the show-all flag.
    bShowEm ^= true;
    showHideBtn.data ('bShowEm', bShowEm);

    //--- Update the button text.
    if (bShowEm)
        showHideBtn.text ('View All');
    else
        showHideBtn.text ('View Less');
}

function ShowItems (parentNode, bShowAll, numVisible) {

    if (bShowAll)
        parentNode.find ("> li").show ();
    else {
        parentNode.find ("> li:lt(" +  numVisible    + ")").show ();
        parentNode.find ("> li:gt(" + (numVisible-1) + ")").hide ();
    }
}

用于控制所有列表的一个按钮......

然后ShowHideFullLists更改如下。 See that in action at jsFiddle.：

ShowHideFullLists ();   //-- Init list displays.

//--- Activate the show/hide button.
$('#ShowHideFullLists').click (ShowHideFullLists);

function ShowHideFullLists () {
    var showHideBtn = $('#ShowHideFullLists');
    var bShowEm     = showHideBtn.data ('bShowEm')  ||  false;

    //--- Loop through all the different lists.
    $("ul.truncateList").each ( function () {
        /*--- Show all or the number defined in the 
            data-list-items attribute.
        */
        if (bShowEm)
            ShowItems ( $(this), true);
        else {
            var jThis   = $(this);
            ShowItems (jThis, false, jThis.data ('listItems') );
        }
    } );

    //--- Update the show-all flag.
    bShowEm ^= true;
    showHideBtn.data ('bShowEm', bShowEm);

    //--- Update the button text.
    if (bShowEm)
        showHideBtn.text ('View All');
    else
        showHideBtn.text ('View Less');
}

另请注意case-sensitivity and dash-refactoring of HTML 5 data- attributes。

Answer 2

我会将我的列表包装到父div中

<div class="truncateList">
  <ul data-listItems="2">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <span class="listshow">View All</span>
  <span class="listhide">View Less</span>
</div>
<div class="truncateList">
  <ul data-listItems="3">
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
  <span class="listshow">View All</span>
  <span class="listhide">View Less</span>
</div>

然后使用此代码，正确隐藏加载项

$(".truncateList").each(function(e){
  var list = $("ul", this);
  var count = list.data("listitems") - 1;
  $("li:gt(" + count + ")", list).hide();
});

挂钩点击事件以显示/隐藏列表

$(".listshow").click(function(e){
  var list = $("ul", $(this).parent());
  var count = list.data("listitems") - 1;
  $("li", list).show();
});

$(".listhide").click(function(e){
  var list = $("ul", $(this).parent());
  var count = list.data("listitems") - 1;
  $("li:gt(" + count + ")", list).hide();
});

如何在页面上的多个列表中应用截断/隐藏列表项？

2 个答案:

用于控制所有列表的一个按钮......