类似豆瓣评论长文展开全文,收起的代码如何实现
我用“div折叠展开”之类的关键字搜索到的代码要不是不能用，要不就不是我要的效果。另外，豆瓣折叠长文的做法是建立两个DIV块来操作，还是用字数判断语句？我想用判断语句，两...
我用“div 折叠 展开”之类的关键字搜索到的代码要不是不能用，要不就不是我要的效果。
另外，豆瓣折叠长文的做法是建立两个DIV块来操作，还是用字数判断语句？
我想用判断语句，两个DIV块操作太麻烦了，特别是文章都是后台生成的 展开
另外，豆瓣折叠长文的做法是建立两个DIV块来操作，还是用字数判断语句？
我想用判断语句，两个DIV块操作太麻烦了，特别是文章都是后台生成的 展开
展开全部
然而你不知道的是, 大多数站点都是直接後台生成摺叠部分与全文的
大概形如
<div>部分...</div>
<a/button class="expand">展开全文</a/button>
<div/textarea>全文</div/textarea>
然後就可以简单的操作了
比如
jQuery(document).delegate('.expand','click',function()
{
var T = $(this);
T.prev().hide()
T.next().show()
})
大概形如
<div>部分...</div>
<a/button class="expand">展开全文</a/button>
<div/textarea>全文</div/textarea>
然後就可以简单的操作了
比如
jQuery(document).delegate('.expand','click',function()
{
var T = $(this);
T.prev().hide()
T.next().show()
})
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不知道 你要的是不是这种效果 jquery.min.js文件不要忘了
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var oldHeight=$("#box").height();
$("#box").css({height:"100px"});
$(".showa").click(function(){
if(parseInt($("#box").height())==oldHeight){
$("#box").animate({height:"100px"});
$(this).html("展开");
}else{
$("#box").animate({height:oldHeight});
$(this).html("收起");
}
});
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;width:300px;margin:6px;line-height:20px;text-overflow:ellipsis;
overflow:hidden">
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
</div>
<a href="javascript:void(0)" class="showa">展开</a>
</body>
</html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<title></title>
<meta charset="utf-8">
<script type="text/javascript" src="./jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var oldHeight=$("#box").height();
$("#box").css({height:"100px"});
$(".showa").click(function(){
if(parseInt($("#box").height())==oldHeight){
$("#box").animate({height:"100px"});
$(this).html("展开");
}else{
$("#box").animate({height:oldHeight});
$(this).html("收起");
}
});
});
</script>
</head>
<body>
<div id="box" style="background:#98bf21;width:300px;margin:6px;line-height:20px;text-overflow:ellipsis;
overflow:hidden">
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
</div>
<a href="javascript:void(0)" class="showa">展开</a>
</body>
</html>
追问
为什么把代码放在单独一个文件里没问题，但是放在wordpress 主题首页代码里就不行了？
追答
你说的WordPress 我没接触过 如果出现你上面说的问题 那就需要你自己去找 是不是哪里有冲突什么的
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
jQuery的animate()方法对div自定义动画效果
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
