Javascript 使用“包裹/展开”功能阅读更多内容阅读更少内容

Javascript 使用“包裹/展开”功能阅读更多内容阅读更少内容,javascript,html,jquery,css,show-hide,Javascript,Html,Jquery,Css,Show Hide,我正在尝试使用wrap方法制作“多读少读”,但它只适用于show more。 因此,基本上,如果文本长度超过我需要的长度,我会将其剥离,并添加一个“阅读更多”链接(这很有效)。在它被解压后,我添加了一个无读链接,该链接应该将其解压到以前的长度,这样就可以使用“读取更多”链接再次解压,但在这里“包裹”不起作用 $(文档).ready(函数(){ var maxLength=490; $(“.keimeno”)。每个(函数(){ var myStr=$(this.text(); 如果($.trim

我正在尝试使用wrap方法制作“多读少读”,但它只适用于show more。
因此,基本上,如果文本长度超过我需要的长度,我会将其剥离,并添加一个“阅读更多”链接(这很有效)。在它被解压后,我添加了一个无读链接,该链接应该将其解压到以前的长度,这样就可以使用“读取更多”链接再次解压,但在这里“包裹”不起作用

$(文档).ready(函数(){
var maxLength=490;
$(“.keimeno”)。每个(函数(){
var myStr=$(this.text();
如果($.trim(myStr).length>maxLength){
var newStr=myStr.substring(0,maxLength);
var removedStr=myStr.substring(maxLength,$.trim(myStr.length));
$(this.empty().html(newStr);
$(此)。附加(“”);
$(this.append(''+removedStr+'');
}
});
$(“.read more”)。单击(函数(){
$(this.sides(“.more text”).contents().unwrap();
$(this.remove();
});
$(“.read less”)。单击(函数(){
$(this.remove();
$(this.this(“.more text”).contents().wrap();
});
});
.keimeno.更多文本{
显示:无;
}

  • 部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本 文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本 文字更多文字更多文字更多文字更多文字更多文字更多文字

  • 部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本 文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本ASDASDASDASDASDASDASSOME文本ASDASDASDASDASDASDASSOME文本 文本asdasdas


您可以通过在
$(document.ready()上执行的文本操作来创建函数
并在单击“无读”时调用该函数。还请注意,有必要从静态父元素(如
document
)为“读取更多”和“读取更少”委派
click()
事件,因为这两个事件都是动态添加到页面的

$(文档).ready(函数(){
函数readMore(){
var maxLength=490;
$(“.keimeno”)。每个(函数(){
var myStr=$(this.text();
如果($.trim(myStr).length>maxLength){
var newStr=myStr.substring(0,maxLength);
var removedStr=myStr.substring(maxLength,$.trim(myStr.length));
$(this.empty().html(newStr);
$(此)。附加(“”);
$(this.append(''+removedStr+'');
}
});
}
readMore();
$(文档)。在(“单击“,”.read more”,函数()上{
$(this.sides(“.more text”).contents().unwrap();
$(this.remove();
});
$(文档)。在(“单击“,”.read less“,函数()上){
$(this.remove();
readMore();
});
});
.keimeno.更多文本{
显示:无;
}

  • 部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本 文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本更多文本 文字更多文字更多文字更多文字更多文字更多文字更多文字

  • 部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本作为数据部分文本 文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本asdasdasSOME文本ASDASDASDASDASDASDASSOME文本ASDASDASDASDASDASDASSOME文本 文本asdasdas


您可以通过在
$(document.ready()上执行的文本操作来创建函数
并在单击“无读”时调用该函数。还请注意,有必要从静态父元素(如
document
)为“读取更多”和“读取更少”委派
click()
事件,因为这两个事件都是动态添加到页面的

$(文档).ready(函数(){
函数readMore(){
var maxLength=490;
$(“.keimeno”)。每个(函数(){
var myStr=$(this.text();
如果($.trim(myStr).length>maxLength){
var newStr=myStr.substring(0,maxLength);
var removedStr=myStr.substring(maxLength,$.trim(myStr.length));
$(this.empty().html(newStr);
$(此)。附加(“”);
$(this.append(''+removedStr+'');
}
});
}
readMore();
$(文档)。在(“单击“,”.read more”,函数()上{
$(this.sides(“.more text”).contents().unwrap();
$(this.remove();
});
$(文档)。在(“单击“,”.read less“,函数