显示和隐藏带有一个问题的文本功能。如何删除初始 "show less" 元素？

Question

代码以其应有的方式运行。

我很难弄清楚如何最初从显示屏上隐藏 "show less" 按钮。

我在这里所做的只是抓住第一段并隐藏其余部分，以便在单击继续阅读按钮后显示。然而，show less 按钮最初显示在显示屏上。我想弄清楚如何删除它。我尝试在 .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, 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, magni nam eum ipsa explicabo qui, 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, 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.</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>
</div>

Answer 1

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

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

此外，我认为一旦用户展开段落然后单击 Show less，它应该 hide 即 link。所以我评论了 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, 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, magni nam eum ipsa explicabo qui, 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, 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.</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>
</div>

显示和隐藏带有一个问题的文本功能。如何删除初始 "show less" 元素？

Show and hide text feature with one issue. How to remove the initial "show less" element?

jquery

character-trimming