固定の高さに基づいてテキストを切り取りたい。テキストが切り取られると、「詳細」リンクを使用してテキストに展開されます。テキストが展開されると、「less」リンクを使用してテキストが折りたたまれます。私は次のようにjsを書きました:
$(document).ready(function () {
// line height in 'px'
var maxheight=218;
var showText = "More";
var hideText = "Less";
$('.textContainer_Truncate').each(function () {
var text = $(this);
if (text.height() > maxheight){
text.css({ 'overflow': 'hidden','height': maxheight + 'px' });
var link = $('<a href="#">' + showText + '</a>');
var linkDiv = $('<div></div>');
linkDiv.append(link);
$(this).after(linkDiv);
link.click(function (event) {
event.preventDefault();
if (text.css('height') == 'auto') {
$(this).html(showText);
text.css('height', maxheight + 'px');
} else {
$(this).html(hideText);
text.css('height', 'auto');
}
});
}
});
});
htmlコードは次のとおりです。
<div class="textContainer_Truncate">
<p>content</p>
</div>
私の問題は、「more」リンクは機能しますが、「less」は機能しないことです。つまり、moreをクリックするとテキストは展開されますが、lessをクリックすると元に戻りません。ここで何が問題になっていますか?ありがとう