Question

我正在尝试展开/折叠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>

Answer 1

您需要将this作为参数传递给changeheight函数才能使用它。所以它会像changeheight(250, this)。然后，您的函数声明将为function changeheight(heightval, that) . . .，其中that将引用调用该函数的链接。你还有其他一些问题，（我认为.text应该是.innerHTML），但这应该让你走上正轨。

Answer 2

您的脚本中的一些更改， DEMO 此处

function changeheight(heightval, _this) {
    var heightset = heightval + 'px';
    var thisText = $(_this).text() ;
    if (thisText == 'more') {
        $('#overviewtext').animate({
            'height': heightset
        }, 600);
        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }
    else if (thisText  == 'less') {

        $('#overviewtext').animate({
            'height': '150px'
        }, 600);

        $(_this).text((thisText  == 'more') ? 'less' : 'more');
    }

    return false;
};

标记更改 - 将此添加为fxn调用的参数，

onclick="return changeheight(250, this);"

jQuery展开/折叠DIV无法正常工作

2 个答案: