jQuery 展开/折叠 DIV 无法正常工作
我正在尝试展开/折叠 DIV。我正在使用一个函数来传递我想要设置的高度，但它不会扩展或折叠 DIV。有谁知道我做错了什么？ JSFiddle
<html>
<head>
<style>
.podTitles{
float:left;
clear:none;
font-size:12px;
font-weight:bold;
color:#3A3938;
line-height:23px;
margin-left:10px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
function changeheight(heightval) {
var heightset = heightval + 'px';
if(this.text == 'more')
{
$('#overviewtext').animate({ 'height': heightset }, 600);
$(this).text($(this).text() == 'more' ? 'less' : 'more');
}
else if(this.text == 'less')
{
$('#overviewtext').animate({ 'height': '150px' }, 600);
$(this).text($(this).text() == 'more' ? 'less' : 'more');
}
};
</script>
</head>
<body>
<div style="background-image:url('Images/RedPodHeader.jpg'); background-repeat:no-repeat; width: 360px; height:23px; background-color: red;">
<span class="podTitles">Overview</span>
<span style="float: right; padding-right: 10px;"><a href="javascript:;" onclick="changeheight(250);"id="morelink">more</a></span>
</div>
<div style="height: 150px; width: 338px; padding: 10px; border-bottom: 1px solid silver; border-left: 1px solid silver; border-right: 1px solid silver;" id="overviewtext"> </div>
</body>
</html>
I am trying to Expand/Collapse a DIV. I am using a function to pass in the height I want it set to but it is not expanding or collapsing the DIV. Does anyone have any idea on what I have done wrong? JSFiddle
<html>
<head>
<style>
.podTitles{
float:left;
clear:none;
font-size:12px;
font-weight:bold;
color:#3A3938;
line-height:23px;
margin-left:10px;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type='text/javascript'>
function changeheight(heightval) {
var heightset = heightval + 'px';
if(this.text == 'more')
{
$('#overviewtext').animate({ 'height': heightset }, 600);
$(this).text($(this).text() == 'more' ? 'less' : 'more');
}
else if(this.text == 'less')
{
$('#overviewtext').animate({ 'height': '150px' }, 600);
$(this).text($(this).text() == 'more' ? 'less' : 'more');
}
};
</script>
</head>
<body>
<div style="background-image:url('Images/RedPodHeader.jpg'); background-repeat:no-repeat; width: 360px; height:23px; background-color: red;">
<span class="podTitles">Overview</span>
<span style="float: right; padding-right: 10px;"><a href="javascript:;" onclick="changeheight(250);"id="morelink">more</a></span>
</div>
<div style="height: 150px; width: 338px; padding: 10px; border-bottom: 1px solid silver; border-left: 1px solid silver; border-right: 1px solid silver;" id="overviewtext"> </div>
</body>
</html>
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
您需要将
this作为参数传递给changeheight函数才能使用它。所以它会类似于changeheight(250, this)。您的函数声明将是 function changeheight(heightval, that) 。 。 . 其中that将引用调用该函数的链接。您仍然遇到一些其他问题（我认为.text应该是.innerHTML），但这应该会让您走上正确的轨道。You need to pass
thisas a parameter to thechangeheightfunction in order to use it. So it would be something likechangeheight(250, this). Your function declaration then would befunction changeheight(heightval, that) . . .wherethatwould then refer to the link that calls the function. You still have some other problems, (I think.textshould be.innerHTML), but that should get you on the right track.脚本中的一些更改，DEMO 此处
标记更改 - 将其添加为fxn 调用的参数，
Couple of changes in your script, DEMO here
Markup change - added this as an argument to the fxn call,