Question

所以基本上我有一个div（或跨度）我想要修剪（让我们说）120个单词并在末尾添加三个点，然后当有人点击该div（或跨度）时它扩展到其余的内容，但也有人再次点击它，它确实相反。

同样的原则是YouTUbe冠军;如果它太长，youtube会添加三个点，你可以点击展开，然后点击折叠，然后点击展开......

在这里，我来到我的小提琴，而不是卡在那里。

<span class="expanding">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</span>

JS：

var ttext = $('.expanding').text();
$('.expanding').text($('.expanding').text().substr(0, 120)).append('...');
$('body').on('click', '.expanding', function () {
    $(this).text(ttext);
});

小提琴：http://jsfiddle.net/Casp3r/6gaSN/

Answer 1

试试这个..

var ttext = $('.expanding').text();
$('.expanding').text($('.expanding').text().substr(0, 120)).append('...');
var stext = $('.expanding').text();
$('body').on('click', '.expanding', function () {

   if($(this).text() == ttext){
      $(this).text(stext);
   }else{
      $(this).text(ttext);
   }

}）;

Answer 2

试试这个Demo

基本上我使用variable来存储前一次点击的状态，并相应地在它们之间切换。

Answer 3

Karl Swedberg有一个小插件：https://github.com/kswedberg/jquery-expander - 像魅力一样！：）

jQuery标题展开/折叠（如在youtube上）

3 个答案: