添加使段落折叠到段落的最后一个visbile行的链接 [英] adding the link that makes the paragraph collapse to the last visbile line of the paragraph

问题描述

我有这段代码，使段落崩溃，但我想添加链接（查看更多/较少）到段落的最后可见行。目前它正在将其添加到折叠段落之后。

  $（document）.ready（function（）{var maxheight = 35; var showText =More; var hideText =Less ; $（'。text'）。each（function（）{var text = $（this）; if（text.height（）> maxheight）{text.css（{'overflow'：'hidden'，'height '：maxheight +'px'}）; var link = $（'< a href =＃>'+ showText +'< / a>'）; var linkDiv = $（'< span> ; / span>'）; linkDiv.append（link）; $（this）.after（linkDiv）; link.click（function（event）{event.preventDefault（）; if（text.height（）> maxheight） {$（this）.html（showText）; text.css（'height'，maxheight +'px'）;} else {$（this）.html（hideText）; text.css（'height'，'auto' ）;}}）;}}）;}）;  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< section class =text> < p>摄影长期以来一直受到理解和探索媒体基本材料的渴望。本次展览以发明和发现的精神为出发点，展示了七位艺术家的作品 - 马修·布兰特，马可·布鲁埃尔，约翰·基亚拉，克里斯·麦考，丽莎·奥本海姆，艾莉森·罗塞特和詹姆斯·威林 - < / p>< / section>  
 

/ p>

解决方案

这里有一个bin与我的解决方案：
http://jsbin.com/kovibo/2/edit?html,js,output

我重用了这个答案的代码来创建一个返回段落第一行的插件：
使用：第一行伪元素作为jQuery选择器

事情做了;希望我的意见会给你一个好的开始。如果您对任何内容有任何问题，请与我们联系。

I have this code to make a paragraph collapse but I would like to add the link (View More/Less) to the last visible line of the paragraph. Currently it is adding it after the collapsed paragraph.

$(document).ready(function() {
  var maxheight = 35;
  var showText = "More";
  var hideText = "Less";

  $('.text').each(function() {
    var text = $(this);
    if (text.height() > maxheight) {
      text.css({
        'overflow': 'hidden',
        'height': maxheight + 'px'
      });

      var link = $('<a href="#">' + showText + '</a>');
      var linkDiv = $('<span></span>');
      linkDiv.append(link);
      $(this).after(linkDiv);

      link.click(function(event) {
        event.preventDefault();
        if (text.height() > maxheight) {
          $(this).html(showText);
          text.css('height', maxheight + 'px');
        } else {
          $(this).html(hideText);
          text.css('height', 'auto');
        }
      });
    }
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="text">
  <p>Photography has long been shaped by the desire to understand and explore the medium’s essential materials. Taking that spirit of invention and discovery as its point of departure, this exhibition features the work of seven artists—Matthew Brandt, Marco Breuer, John Chiara, Chris McCaw, Lisa Oppenheim, Alison Rossiter, and James Welling—who focus their investigations on the light sensitivity and chemical processing of photographic papers, challenging us to see the medium anew.</p>
</section>

解决方案

Here's a bin with my solution: http://jsbin.com/kovibo/2/edit?html,js,output

I repurposed the code from this answer to create a plugin that returns the first line of the paragraph: Use :first-line pseudo-element as a jQuery selector

I made a few changes to the way things are done; hopefully my comments will give you a good start. Let me know if you have any questions on anything within.

这篇关于添加使段落折叠到段落的最后一个visbile行的链接的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！