求一个jquery展开隐藏效果
说明：1.页面有多个这种效果2.不是隐藏整个div的那种（默认显示一些内容，点击展开显示更多详情）3.展开和隐藏按钮是根据内容变化的...
说明：
1.页面有多个这种效果
2.不是隐藏整个div的那种（默认显示一些内容，点击展开显示更多详情）
3.展开和隐藏按钮是根据内容变化的 展开
1.页面有多个这种效果
2.不是隐藏整个div的那种（默认显示一些内容，点击展开显示更多详情）
3.展开和隐藏按钮是根据内容变化的 展开
3个回答
展开全部
楼上正解。先用JUQERY截取一段内容或者DIV之类。不知道你要显示隐藏的是什么样的内容！
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你可以考虑先判断字数，比如，超出100个字，用JS作字符剪切，然后显示“展开”按钮，没有超出范围的，直接显示。
追问
偶对js基本属于一点不懂
本回答被网友采纳
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
不知道楼主想要的是什么效果，我写个简单的看是不是楼主想要的。样式要你自己定义下哦。
那个JQuery的引用你引用你本地的吧，我是本地测试没问题的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>代码</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".content div").hide();//默认不显示指定区域的所有内容
$(".content div:first").show();//显示第一个按钮下的内容区
$(".nav li").each(function(index) {
$(this).click(function(){
$(".content div").eq(index).addClass(".showcss").show().end().eq(index).siblings().removeClass(".showcss").hide();
})
});
})
</script>
<style>
.showcss{display:block;}
</style>
</head>
<body>
<ul class="nav">
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</ul>
<div class="content">
<div><h2>栏目1</h2>栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目</div>
<div><h2>栏目2</h2>栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目</div>
<div><h2>栏目3</h2>栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目</div>
</div>
</body>
</html>
那个JQuery的引用你引用你本地的吧，我是本地测试没问题的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>代码</title>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$(function(){
$(".content div").hide();//默认不显示指定区域的所有内容
$(".content div:first").show();//显示第一个按钮下的内容区
$(".nav li").each(function(index) {
$(this).click(function(){
$(".content div").eq(index).addClass(".showcss").show().end().eq(index).siblings().removeClass(".showcss").hide();
})
});
})
</script>
<style>
.showcss{display:block;}
</style>
</head>
<body>
<ul class="nav">
<li>栏目1</li>
<li>栏目2</li>
<li>栏目3</li>
</ul>
<div class="content">
<div><h2>栏目1</h2>栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目</div>
<div><h2>栏目2</h2>栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目</div>
<div><h2>栏目3</h2>栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目栏目</div>
</div>
</body>
</html>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（1）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
