调试显示更多显示更少按钮 - 缺少文本段落

Posted 2023-04-12

【中文标题】调试显示更多显示更少按钮 - 缺少文本段落

【英文标题】：Debugging Show More Show Less button - Missing Paragraphs of Text

【发布时间】：2020-02-15 17:32:58

【问题描述】：

我正在尝试调试此页面上运行的“加载更多/加载更少”功能。 https://maes-mynan.cogitoprojectx.com/holiday-homes/the-llewellyn-lodge-lodge/

您可以在标题为“更多关于卢埃林旅馆”的部分中看到它

文本通过高级自定义字段所见即所得字段 [WordPress] 显示。

我一直在玩数字行，即.length>4，但没有任何效果。

据我所知，代码设置为截断第四段之后的文本并单击显示全文。然而，它似乎完全删除了第四段，而不是仅仅截断文本。 本质上，它会显示第 1 - 3 段，[错过 4]，然后再显示第 5 段。

我一直在更改行中数字的值，例如.length>4 无效。

任何帮助，以阻止段落完全消失将不胜感激。

jQuery(document).ready(function() 
  jQuery('.read-more2').each(function() 
    if (jQuery(this).children('p').length > 4) 
      jQuery(this).children('p:lt(3)').show();
      jQuery(this).append('<button class="loadMore btn btn-primary">Show More</button>');
    
  );
  jQuery('.read-more2').on("click", '.loadMore', function() 
    jQuery(this).parent('.read-more2').children('p:gt(3)').show(); // use gt instead of lt
    jQuery(this).removeClass('loadMore').addClass('loadLess').text('Show Less');
  );
  jQuery('.read-more2').on("click", '.loadLess', function() 
    jQuery(this).parent('.read-more2').children('p:gt(3)').hide(); // use gt instead of lt
    jQuery(this).removeClass('loadLess').addClass('loadMore').text('Show More');
  );
);

【问题讨论】：

.length 不会给你行数。检查返回的值。

他说第 4 段，而 .length 确实返回了段落数

你有一个错误：.live 被替换为 .on - 更改此代码// Close sticky header on menu item click. jQuery('.navbar-collapse a:not(.dropdown-toggle)').live( "click", function() //jQuery( ".navbar-toggle").not( ".collapsed" ).trigger( "click" ); jQuery('.navbar-collapse').css('height', '0'); jQuery('.navbar-collapse').removeClass('in'); );

谢谢@mplungjan 刚刚纠正了这一点。关于如何调整加载更多功能，阻止它隐藏第 4 段的任何想法或关于如何通过其他方法实现相同效果的任何建议？

【参考方案1】：

假设最初 SHOWING 的原因是所有 p 都被隐藏了，我们需要在切换时隐藏 gt(2)。

可以通过让按钮使用.toggle(this.textContent==='Show More') 而不是使用两个事件处理程序和两个类名来缩短代码

$(document).ready(function() 
  $('.read-more2').each(function() 
    if ($(this).children('p').length > 4) 
      $(this).children('p:lt(3)').show(); // because they were hidden 
      $(this).append('<button class="loadMore btn btn-primary">Show More</button>');
    
  );
  $('.read-more2').on("click", '.loadMore', function() 
    $(this).parent('.read-more2').children('p').show(); // use p to show all
    $(this).removeClass('loadMore').addClass('loadLess').text('Show Less');
  );
  $('.read-more2').on("click", '.loadLess', function() 
    $(this).parent('.read-more2').children('p:gt(2)').hide(); // use gt 2 instead 
    $(this).removeClass('loadLess').addClass('loadMore').text('Show More');
  );
);

.read-more2 > p  display:none 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="read-more2">
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <p>p4</p>
  <p>p5</p>
  <p>p6</p>
</div>  
<div class="read-more2">
  <p>p1</p>
  <p>p2</p>
  <p>p3</p>
  <p>p4</p>
  <p>p5</p>
  <p>p6</p>
</div>

    $(document).ready(function() 
      $('.read-more-spec').each(function() 
        if ($(this).find('ul li').length > 4) 
          $(this).find('ul li:lt(3)').show(); // because they were hidden 
          $(this).append('<button class="loadMore btn btn-primary">Show More</button>');
        
      );
      $('.read-more-spec').on("click", '.loadMore', function() 
        $(this).parent('.read-more-spec').find('ul li').show(); // use p to show all
        $(this).removeClass('loadMore').addClass('loadLess').text('Show Less');
      );
      $('.read-more-spec').on("click", '.loadLess', function() 
        $(this).parent('.read-more-spec').find('ul li:gt(2)').hide(); // use gt 2 instead 
        $(this).removeClass('loadLess').addClass('loadMore').text('Show More');
      );
    );

.read-more-spec ul li  display:none 

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="col-md-6 read-more-spec black">
  <h3>LODGE FEATURES</h3>
  <div>
    <ul>
      <li>Vaulted ceiling to lounge, kitchen and diner</li>
      <li>Two sets of French doors to the front elevation</li>
      <li>Overhanging eaves with discreet lighting to the external front elevation</li>
      <li>Colour coordinated curtains, blinds and carpets</li>
      <li>Fully fitted country style kitchen with four burner gas hob, built under oven and integrated dishwasher and fridge/freezer</li>
      <li>Centre island/breakfast bar with two high backed chairs</li>
      <li>Utility cupboard with under counter washing machine, condensing dryer, hooks, shelves and boot drying area under boiler</li>
      <li>Solid wood dining table top with four painted white chairs</li>
      <li>One large comfortable sofa and two armchairs &#8211; both in a classical design</li>
      <li>Coffee table and lamp table also feature in the lounge area</li>
      <li>Fireplace mantel and, electric log burner style fire</li>
      <li>5ft King sized bed in master bedroom with gas lift under-bed storage</li>
      <li>Freestanding bedroom furniture which includes large wardrobe, mirror, dressing table, dressing stool and bedside tables</li>
      <li>Ensuite bathroom with tiled corner shower and heated towel rail</li>
      <li>Bath in main bathroom with overhead shower and heated towel rail</li>
      <li>Wall mirrors in both bathrooms</li>
      <li>TV points in lounge and master bedroom</li>
      <li>Energy efficient A Rated boiler with radiators and central heating throughout</li>
      <li>Built to British Standard 3632 &#8211; residential specification</li>
      <li>Timber frame structure</li>
      <li>10 year structural warranty</li>
      <li>Horizontal Sierra Canexel Cladding to the exterior for easy maintenance</li>
      <li>Anthracite grey UPVC double glazed doors and windows</li>
      <li>Large decking in complementing grey composite board and handrail with two lockable gates (ideal for dog owners) to front and side. Steps down into the side garden area</li>
<!--       <button class="loadMore btn btn-primary">Show More</button>  -->
    </ul>
  </div>

【讨论】：

感谢@mplugjan 的解决方案。我如何将其应用于同一页面下方出现的 列表？

我尝试过使用 但这似乎不起作用。我应该补充； 列表是从自定义字段中包含的文本生成的。标记是：

谢谢@mplungjan - 样式中似乎省略了“li”。

我不明白你的评论

总之，脚本运行良好，谢谢。只是我没有正确地将 display: none 值添加到样式表中的正确标记中。即我将无序列表设置为显示：无，而不是列表项。希望这是有道理的。