jQuery实现显示更多/收起按钮失效，需默认展示前10个列表项

嘿，我来帮你搞定这个显示更多/收起的功能！之前代码失效大概率是因为初始隐藏逻辑没写对，或者事件绑定出了问题。我给你一套能正常工作的实现方案，顺便拆解下关键点：

完整实现代码 #

HTML结构（假设你的列表结构如下） #

<ul class="ty-compact-list">
  <li>列表项 1</li>
  <li>列表项 2</li>
  <li>列表项 3</li>
  <li>列表项 4</li>
  <li>列表项 5</li>
  <li>列表项 6</li>
  <li>列表项 7</li>
  <li>列表项 8</li>
  <li>列表项 9</li>
  <li>列表项 10</li>
  <li>列表项 11</li>
  <li>列表项 12</li>
  <!-- 更多列表项... -->
</ul>
<button class="toggle-more-btn">显示更多</button>

jQuery逻辑 #

$(document).ready(function() {
  // 选中所有列表项
  const $listItems = $('.ty-compact-list li');
  // 默认显示的数量
  const defaultShowCount = 10;

  // 初始化：隐藏超过默认数量的列表项
  if ($listItems.length > defaultShowCount) {
    $listItems.slice(defaultShowCount).hide();
  } else {
    // 如果列表总数≤10，直接隐藏按钮
    $('.toggle-more-btn').hide();
  }

  // 绑定按钮点击事件
  $('.toggle-more-btn').on('click', function() {
    const $btn = $(this);
    // 切换超出部分的显示/隐藏状态
    $listItems.slice(defaultShowCount).toggle();

    // 更新按钮文本
    if ($btn.text() === '显示更多') {
      $btn.text('收起');
    } else {
      $btn.text('显示更多');
    }
  });
});

关键注意事项 #

• 确保DOM加载完成再执行代码：用$(document).ready()包裹逻辑，避免页面元素还没渲染就执行代码，导致选择器找不到元素。
• 动态列表适配：如果你的.ty-compact-list是通过AJAX动态加载的，要改用事件委托绑定按钮事件，比如：

  $(document).on('click', '.toggle-more-btn', function() {
    // 内部逻辑和上面一致
  });
  

• 检查选择器正确性：确认.ty-compact-list是列表容器的正确类名，且列表项是直接子元素li，如果结构嵌套更深，要调整选择器（比如.ty-compact-list > li）。
• 引入jQuery库：别忘了在页面中加载jQuery，否则代码完全无法运行（可以放在<body>标签末尾）。

内容的提问来源于stack exchange，提问作者Arebhy Sridaran