<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>JS实现内容超出多少后隐藏、显示 hide/show</title>
<style type="text/css">
.detail{line-height:20px;font-size:12px;}
.detail .all{display:none;}
.detail .more{text-decoration:none;color:#333333;cursor:pointer;}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$(function(){
//对于每一条评论:
$('.detail').each(function(){
//记录评论内容
var html=$(this).html();
//把评论div的内容替换成三个部分:简短评论内容、完整评论内容和查看内容的超链接
$(this).html('<span class="short">'+html.substring(0,30)+'</span><span class="all">'+html+'</span><a class="more">更多链接</a>');
});
//对于每一个评论中查看内容的超链接:
$('.detail .more').each(function(){
//如果点击该链接则:
$(this).click(function(){
//把不需要显示的内容隐藏,需要显示的内容展开。
$(this).parent().children('.all,.short').toggle();
//替换超链接的文字
if($(this).html()=='(更多链接)')$(this).html('(收起)');
else $(this).html('(更多链接)');
});
});
});
</script>
<body>
<div class="detail">JS实现内容超出多少后隐藏、显示JS实现内容超出多少后隐藏、显示JS实现内容超出多少后隐藏、显示JS实现内容超出多少后隐藏、显示JS实现内容超出多少后隐藏、显示JS实现内容超出多少后隐藏、显示JS实现内容超出多少后隐藏、显示JS实现内容超出多少后隐藏、显示JS实现内容超出多少后隐藏、显示JS实现内容超出多少后隐藏、显示JS实现内容超出多少后隐藏、显示
</div>
</body>
</html>
https://www.izhinan.cn/article-1006-1.html以上内容就是关于【JS实现内容超出多少后隐藏、显示 】的指南经验分享;您也可以通过下方的评论互动,发表您的意见和观点,让更多人通过生活指南经验分享因之受益,让生活变得更简单。