jQuery標題展開/摺疊（像在YouTube上）

所以基本上我有一個div（或跨度），我想修剪（比方說）120個單詞，並在最後添加三個點，然後當有人點擊該div （或跨度）它擴展到其餘的內容，但也有人再次點擊它時，它會做相反的事情。jQuery標題展開/摺疊（像在YouTube上）

與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/

來源

2014-01-07 Dino

最新你的問題？ –

到目前爲止，我有它擴大，但不是第二次崩潰，第三次點擊reexpand等 – Dino

如果我得到它的正確，你想擴大一次點擊，然後在第二次崩潰它？然後繼續相同！？ – Ajey

嘗試了這一點..

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); 
    }

}）;

來源

2014-01-07 12:48:58

不錯，正是我需要的，你先生救了我的理智。 – Dino

我的快樂..如果我的答案是爲你工作，你可以請打勾我的答案。 –

試試這個Demo

基本上我使用的variable來存儲先前點擊的狀態，因此它們之間進行切換。

來源

2014-01-07 13:02:32 Ajey

卡爾斯韋德伯格有這個小插件：https://github.com/kswedberg/jquery-expander - 工程就像一個魅力！ :)

來源

2014-01-07 13:11:52 ticktoo

jQuery標題展開/摺疊（像在YouTube上）

回答

相關問題