具有一个问题的显示和隐藏文本功能。如何删除初始的“显示较少”元素？

2024-07-27 • 问答

代码以应有的方式发挥作用。

我很难弄清楚如何最初从显示器上隐藏“少显示”按钮。

我在这里要做的就是抓取第一段，然后隐藏其余部分，以便在单击继续阅读按钮后显示。但是，最初显示时少显示按钮。我想弄清楚如何删除它。我尝试通过.html方法将其删除，但是它根本没有显示出来。

有什么建议吗？

jQuery(function() {

  //Read more / read less text functionality. Add "minimize" to any paragraph of text.
  var wrapPara = jQuery('.minimize p').nextAll().wrapAll('<div class="hide-body">');
  var minimized_elements = jQuery('.minimize > p:first-child');
  var continueReading = '<a href="#" class="btn btn-success mr-3 more">Continue reading</a>';
  var showLess = '<a href="#" class="btn btn-success less">Show less</a>';

  minimized_elements.each(function() {
    jQuery(this).html(
      minimized_elements.text() + '<span>... </span>' + continueReading + " " + showLess
    ).appendTo(".minimize");
  });

  jQuery('a.more',minimized_elements).click(function(event) {
    event.preventDefault();
    jQuery(this).toggle();
    jQuery(this).next().show();
    jQuery(".hide-body").show();
  });

  jQuery('a.less',minimized_elements).click(function(event) {
    event.preventDefault();
    jQuery(this).toggle();
    jQuery(this).prev().show().prev().show();
    jQuery(".hide-body").hide();
    jQuery(".less").show();
  });
});

.hide-body {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="minimize">
  <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam,magni nam eum ipsa explicabo qui,cumque totam repellat. Lorem ipsum dolor sit amet,consectetur adipisicing
    elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam,cumque totam repellat Lorem ipsum dolor sit amet,consectetur adipisicing elit. Doloribus tenetur minus omnis expedita
    at possimus est mollitia iste dignissimos amet ipsam,cumque totam repellat</p>
  <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus,fugiat quas quasi nulla nobis,sed tempora eveniet consequatur. Enim autem recusandae,iste est aut.</p>
  <p>Lorem ipsum dolor sit amet,cumque totam repellat.</p>
  <p>Lorem ipsum dolor sit amet,iste est aut.</p>
</div>

您希望最初隐藏Show less链接，因此只需在其style="display:none;"中添加html，如下所示。

var showLess = '<a href="#" class="btn btn-success less" style="display:none;">Show less</a>';

此外，我认为一旦用户展开该段落然后单击Show less，它就应该hide链接。所以我已经评论了jQuery(".less").show();行。

完整代码如下。您可以对其进行测试。

jQuery(function() {

  //Read more / read less text functionality. Add "minimize" to any paragraph of text.
  var wrapPara = jQuery('.minimize p').nextAll().wrapAll('<div class="hide-body">');
  var minimized_elements = jQuery('.minimize > p:first-child');
  var continueReading = '<a href="#" class="btn btn-success mr-3 more">Continue reading</a>';
  var showLess = '<a href="#" class="btn btn-success less" style="display:none;">Show less</a>';

  minimized_elements.each(function() {
    jQuery(this).html(
      minimized_elements.text() + '<span>... </span>' + continueReading + " " + showLess
    ).appendTo(".minimize");
  });

  jQuery('a.more',minimized_elements).click(function(event) {
    event.preventDefault();
    jQuery(this).toggle();
    jQuery(this).next().show();
    jQuery(".hide-body").show();
  });

  jQuery('a.less',minimized_elements).click(function(event) {
    event.preventDefault();
    jQuery(this).toggle();
    jQuery(this).prev().show().prev().show();
    jQuery(".hide-body").hide();
    // jQuery(".less").show();  // Commented to hide show less link once it clicked.
  });
});

.hide-body {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="minimize">
  <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam,magni nam eum ipsa explicabo qui,cumque totam repellat. Lorem ipsum dolor sit amet,consectetur adipisicing
    elit. Doloribus tenetur minus omnis expedita at possimus est mollitia iste dignissimos amet ipsam,cumque totam repellat Lorem ipsum dolor sit amet,consectetur adipisicing elit. Doloribus tenetur minus omnis expedita
    at possimus est mollitia iste dignissimos amet ipsam,cumque totam repellat</p>
  <p>Lorem ipsum dolor sit amet,consectetur adipisicing elit. Ea hic recusandae tenetur eos harum accusamus,fugiat quas quasi nulla nobis,sed tempora eveniet consequatur. Enim autem recusandae,iste est aut.</p>
  <p>Lorem ipsum dolor sit amet,cumque totam repellat.</p>
  <p>Lorem ipsum dolor sit amet,iste est aut.</p>
</div>

具有一个问题的显示和隐藏文本功能。如何删除初始的“显示较少”元素？

xiariweiyang 回答：具有一个问题的显示和隐藏文本功能。如何删除初始的“显示较少”元素？

大家都在问