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

Question

我正在尝试调试此页面上运行的“加载更多/加载更少”功能。 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');
  });
});

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