多文本类型下Read more/read less脚本失效问题排查

问题根源 #

你的展开收起脚本在纯列表容器（最后一个.description）失效，核心问题有三个：

• 元素数量判断门槛过高：最后一个容器只有2个顶级元素（1个<p>+1个<ul>），但脚本判断条件是LiN > 3（元素数量大于3才生成Read more按钮），直接跳过了该容器的处理。
• 重复且矛盾的隐藏逻辑：脚本里写了两次隐藏操作（$(p).eq(2).nextAll()和$(this).find(...).eq(4).nextAll()），导致元素被重复隐藏、重复添加类，逻辑混乱。
• 拼写错误：点击事件里的选择器ol.toggeable少了一个字母l，应为ol.toggleable，导致有序列表的切换失效。

修复后的代码 #

JavaScript #

jQuery.noConflict();
jQuery(document).ready(function($) {
  $('.description').each(function(){
    var items = $(this).find('p, ul, ol');
    var itemCount = items.length;
    // 调整判断条件：元素数量大于2就触发折叠，可根据需求修改数值
    if( itemCount > 2 ){
      // 统一隐藏第3个及以后的顶级元素
      items.eq(2).nextAll().hide().addClass('toggleable');
      $(this).append('<p class="more">Read more...</p>');
    }
    // 额外处理：单个列表内子项过多时，折叠列表内部内容（可选）
    $(this).find('ul, ol').each(function(){
      var listItems = $(this).find('li');
      if(listItems.length > 3){
        listItems.eq(3).nextAll().hide().addClass('list-toggleable');
        $(this).after('<p class="more-list">展开更多列表项...</p>');
      }
    });
  });

  // 容器级展开收起逻辑
  $('.description').on('click','.more', function(){
    $(this).toggleClass('less').text(function(){
      return $(this).hasClass('less') ? 'Read less...' : 'Read more...';
    });
    $(this).siblings('p.toggleable, ul.toggleable, ol.toggleable').slideToggle();
  });

  // 列表内部展开收起逻辑（可选）
  $('.description').on('click','.more-list', function(){
    $(this).toggleClass('less').text(function(){
      return $(this).hasClass('less') ? '收起列表项...' : '展开更多列表项...';
    });
    $(this).prev('ul, ol').find('.list-toggleable').slideToggle();
  });
});

CSS #

.more, .more-list {
  color: red; 
  cursor: pointer;
  margin: 10px 0;
}

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="description">
  <p>Párrafo 01</p>
  <p>Párrafo 02</p>
  <p>Párrafo 02</p>
  <p>Párrafo 04</p>
  <p>Párrafo 05</p>
  <p>Párrafo 06</p>
</div>

<div class="description">
  <p>Lorem Ipsum is simply dummy text </p>
  <ul>
    <li>Lista 01</li>
    <li>Lista 02</li>
    <li>Lista 03</li>
    <li>Lista 04</li>
    <li>Lista 05</li>
    <li>Lista 06</li>
  </ul>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
</div>

<div class="description">
  <p>Lorem Ipsum is simply dummy text </p>
  <ol>
    <li>Lista 01</li>
    <li>Lista 02</li>
    <li>Lista 03</li>
    <li>Lista 04</li>
    <li>Lista 05</li>
    <li>Lista 06</li>
  </ol>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
  <p>Lorem Ipsum is simply dummy text </p>
</div>

<div class="description">
  <p>Lorem Ipsum is simply dummy text </p>
  <ul>
    <li>Lista 01</li>
    <li>Lista 02</li>
    <li>Lista 03</li>
    <li>Lista 04</li>
    <li>Lista 05</li>
    <li>Lista 06</li>
    <li>Lista 07</li>
    <li>Lista 08</li>
    <li>Lista 09</li>
    <li>Lista 10</li>
  </ul>
</div>

修改说明 #

1. 降低了元素数量判断门槛（从>3改为>2），确保少元素容器也能生成展开按钮，可根据需求自行调整数值。
2. 删除重复的隐藏代码，统一处理所有顶级元素的折叠逻辑。
3. 修复了有序列表选择器的拼写错误。
4. 新增可选的列表内部折叠功能，解决单个列表项过多的显示问题。

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