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

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

假设我在一个页面上有5个100项的列表。如何在每个列表中动态隐藏不同数量的列表项

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

函数ShowItems（）{
如果（Count>$（“ul.truncateList>li”）.size（）{Count=$（“ul.truncateList>li”）.size（）}；
$（“ul.truncateList>li:lt（“+Count+”）.show（）；
$（“ul.truncateList>li:gt（“+（计数-1）+”）.hide（）；
}
（函数（$）{
变量listItems=$（'ul.truncateList'）。数据（'listItems'）；
计数=列表项；
ShowItems（）；
$（'.listhhide'）.toggle（）；
$（'.listShow'）。单击（函数（）{
计数=100000；
ShowItems（）；
$（'.listShow'）.toggle（）；
$（'.listhhide'）.toggle（）；
});
$（'.listHide'）。单击（函数（）{
计数=列表项；
ShowItems（）；
$（'.listShow'）.toggle（）；
$（'.listhhide'）.toggle（）；
});
})（jQuery）；

用法：

<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%客户端）视觉隐藏长列表的整个挑战。

我会将列表包装到父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>

并钩住单击事件以显示/隐藏列表

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

---

我会把我的列表包装成父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>

并钩住单击事件以显示/隐藏列表

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

---

对于多个列表，使用自己的“显示/隐藏”进行选择，合并这两个跨距，并在每个列表后面放置一个控件，如下所示：

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

---

---

对于控制所有列表的一个按钮。。。 然后

showHiddenFileLists

更改如下：

---

另外，请注意。

对于多个列表，每个列表都有自己的“显示/隐藏”，合并这两个跨度，并在每个列表后面放置一个控件，如下所示：

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

---

---

对于控制所有列表的一个按钮。。。 然后

showHiddenFileLists

更改如下：

---

另外，请注意。

谢谢Brock。一个澄清：你能帮我为每个列表设置独立的显示/隐藏按钮吗？您的解决方案有一个按钮来控制所有这些。谢谢Brock。一个澄清：你能帮我为每个列表设置独立的显示/隐藏按钮吗？你的解决方案有一个按钮来控制它们。非常好。我添加了：“$（this.parent（）.find（'.listShow'）.show（）；$（this.hide（）；”来切换按钮。我还向truncate函数添加了一个直接子选择器（>）以避免计算子列表：$（'>li:gt…非常好。我添加了：“$（this.parent（）.find（'.listShow'）.show（）；$（this.hide（）；”）以切换按钮。我还向truncate函数添加了一个直接子选择器（>）以避免计算子列表：$（'>li:gt。。。

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