2012-01-30 8 views
0

DIV 확장/축소하려고합니다. 내가 원하는 높이로 전달하는 함수를 사용하고 있지만 확장 또는 축소하지 않는 것은 DIV입니다. 누구든지 내가 잘못한 것에 대해 어떤 생각을 가지고 있습니까? JSFiddlejQuery Expand/Collaspe DIV가 제대로 작동하지 않습니다.

<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> 
+0

귀하의 코드에서 .... 당신은 jQuery를로드하지 않습니다! – poscaman

+0

@poscaman이 그 행을 복사하는 것을 잊어 버렸습니다. 하지만 jsfiddle 그것은로드 jquery 않습니다 및 여전히 작동하지 않습니다. – ios85

답변

1

커플, 여기 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 호출에 인수로이 추가, 내가 jQuery를의 포함을 찾을 수 없습니다

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

당신은 그것을 사용하기 위해 changeheight 함수에 매개 변수로 this을 통과해야합니다. 그래서 그것은 changeheight(250, this)과 같을 것입니다. 그러면 함수 선언은 function changeheight(heightval, that) . . .이되며, 여기에서 that은 함수를 호출하는 링크를 나타냅니다. 당신은 여전히 ​​다른 문제가있다. (나는 .text.innerHTML이어야한다),하지만 그것은 올바른 방향으로 나아갈 것이다. 스크립트의 변화

관련 문제