jQuery를 사용하여 창에서 숨겨진 유체 요소의 높이를 확인하십시오.

Question

호버 상에 해당 기사의 발췌 부분을 표시하는 기사의 사이드 바를 사용하여 높은 내용의 WordPress 블로그를 구축 중입니다. TRY 및 창 크기 조정에 따라 새로운 높이를 얻을 수

function articleHeight() { 
    $(".article").each(function() { 
      $(this).css("height", $(this).height()); 
    }); 
} 

articleHeight(); 

다음 코드 : 나는 (slideDown와 jQuery의 일반적인 점프 문제를 방지하기 위해) 다음이 코드를 사용하여 요소를 숨기 요소의 높이를 얻기 위해 jQuery를 사용

$(window).resize(function() { 
    articleHeight(); 
}); 

첫 번째 부분은 훌륭하게 작동하지만 크기를 다시 계산하지 않아 너무 많은 공간을 제공하거나 크기를 조정할 때 발췌 내용을 잘라냅니다.

요소가 이미 숨겨져 있기 때문에 새 높이를 가져올 수 없다는 것을 알았지 만 jQuery에서 요소 숨김을 테스트하여 여전히 재 계산하지 않습니다.

이것에 대한 아이디어는 매우 유용 할 것입니다. 정말 고마워.

Answer 1

$(this)에 이미 부여 된 높이가 주어질 이유가 있습니까?

$(this).css("height", $(this).height()); 

당신은 새로운 크기 $(window).height()에 대해 비교 한 다음을 차별화하는 몇 가지 수학을 사용해야합니다. 예를 들어이 같이

:

$(this).css("height", $(window).height() - 200); 

당신은 바꿀 것 페이지 작동 뭔가에 200.

Answer 2

outerHeight가 유용 할 수도 있지만 display 속성에 대해 더 관심을 가질 것입니다. 인라인 블록이 문제를 해결할 수도 있습니다.

: 여기

내가 UI 작동 방식을 완전히 모르겠지만, 난 당신이 내가 희망 당신의 문제를 해결하는 데 사용할 수있는 jsFiddle을 만든 JQuery와 outerHeight 문서 http://api.jquery.com/outerHeight/

Answer 3

입니다 http://jsfiddle.net/RqqpK/1/

이제 기사 요소가 원하는 동작과 각 요소의 상태 저장에 사용할 수있는 추가 기능으로 확장되었습니다.

물론 css ({height : ...})보다 addClass()를 사용하는 것이 더 좋으며 코드가 커질 때 이점을 얻을 수있는 다른 개선 사항이 있지만 시작에 불과합니다. 행운을 빌어 요