div : 슬라이딩에 "높이 : 자동"트릭이 무엇입니까

간단한 <ul> 프로젝트 목록을 표시하는 응용 프로그램이 있습니다. 사용자가 새로운 "카테고리"를 클릭하면 프로젝트 목록을 새로운 프로젝트 목록으로 대체하고 싶습니다.div : 슬라이딩에 "높이 : 자동"트릭이 무엇입니까

나는 추가 전환 제안에 열려있어하지만 내가 시작 한 것은 -

은 축소 또는 최대 슬라이드 기존 프로젝트 목록 노드에게
동적 (자바 스크립트 DOM 방법)을 제거 아래를
이 페이지에 새 목록을 첨부 0의 높이와 함께 새로운 프로젝트 목록을 작성하고 확장하거나 슬라이드

아직 네이티브 '슬라이드 업'또는 '슬 라이드 다운'메서드가없는 야후의 YUI3 라이브러리를 사용하여 시뮬레이션 중입니다. 높이 = 0을 설정하는 간단한 애니메이션을 실행하여 "슬라이드 업"을 쉽게 시뮬레이트 할 수 있지만, 최종 높이를 알 수 없으므로 "슬라이딩 다운"방법을 시뮬레이트하는 데 문제가 있습니다. 목록 (동적으로 빌드 중입니다.).

나는 높이가 적절하기를 바란다. 즉, "html : auto"를 원한다는 뜻이다. 그러나 YUI3은 CSS 속성을 높이에서 높이/높이로 바꿀 수 없다. 자동. float 값이 필요합니다.

divs를 위아래로 (jQuery) 슬라이드 할 수있는 몇 가지 자바 스크립트 라이브러리를 살펴 보았지만 간단히 높이의 원래 값을 저장하는 것처럼 보입니다.하지만 "자동"일 것입니다 ... 작동하지 않습니다. . 어쩌면 먼저 실제 높이를 계산하고 있을까요?

누구나 최선의 방법을 찾아 갈 수 있습니까? 목록을 만들 때 수동으로 높이를 계산해야하고 높이를 0으로 설정 한 다음 계산 된 높이에 애니메이션을 적용한 다음 높이를 auto : 스타일을 auto로 설정합니다. 좋은 상태로 남았습니까? 그렇다면 크로스 브라우저 방식으로 무엇을 할 수 있습니까? -Luther

출처

2010-12-05 Luther Baker

무엇 가시에 오버 플로우가있는 분-height 속성을 설정하는 방법에 대한

감사?

출처

2010-12-05 02:29:47

어떻게 그 요소가 아래에 있을까요? 프로젝트 목록이 200 개의 이름으로 확장되므로 적절하게 푸시됩니까? –

네, 그럴 것이라고 믿습니다 ...하지만 나는 디스플레이를 설정할 것입니다 : 확실하게 블록하십시오 :) –

나는 이것이 당신이 찾고있는 것이 더 많거나 적음이라고 생각합니다. 트릭은 두 개의 중첩 된 div를 갖는 것입니다. 바깥 쪽은 실제 높이를 제어하고 안쪽은 실제 높이를 계산하는 데 사용됩니다. 애니메이션이 끝나면 바깥 쪽 div가 펼쳐지면 "auto"로 되돌아 가서 더 많은 목록 요소를 동적으로 추가 할 수 있습니다.

이것은 뻔뻔하게 JQuery blog post에서 수정되었습니다.

<!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>Animate to Auto</title> 
<style type="text/css"> 
.inner {background:#ccc;height:auto;overflow:hidden;} 
.inner ol{margin:0;} 
.box{height:0px;overflow:hidden;} 
</style> <script type="text/javascript" charset="utf-8" 
     src="http://yui.yahooapis.com/3.2.0/build/yui/yui-min.js"> 
</script> 
</head> 
<body> 
<button class="btn">Toggle Height</button> 
<div class="box"> 
<div class="inner"> 
    <ol> 
    <li>Bashful</li> 
    <li>Doc</li> 
    <li>Dopey</li> 
    <li>Grumpy</li> 
    <li>Happy</li> 
    <li>Sleepy</li> 
    <li>Sneezy</li> 
    </ol> 
</div> 
</div> 
OTHER STUFF HERE 

<script> 
YUI().use('node', 'event', 'anim', function(Y) { 

    var heightAnim = new Y.Anim({ 
     node: Y.one('.box'), 
     to: { 
     height: 0 
     } 
    }); 

    heightAnim.on('end', function (e) { 
     var box = heightAnim.get('node'); 
     if (parseInt(box.getStyle('height')) > 0) { 
     box.setStyle('height', 'auto'); 
     } 
    }); 

    Y.one('.btn').on('click', function(e){ 
     var box = this.get('node'); 
     var inner = box.one('.inner'); 
     var boxH = box.getStyle('height'); 
     if (boxH === 'auto') { 
     box.setStyle('height',inner.getStyle('height')); 
     this.set('to', {height: 0}); 
     this.run(); 
     } else { 
     this.set('to', {height: parseInt(inner.getStyle('height'))}); 
     this.run(); 
     } 
    },heightAnim); 

}); 
</script> 
</body> 
</html>

출처

2010-12-07 18:40:52 mjhm

div : 슬라이딩에 "높이 : 자동"트릭이 무엇입니까

답변

관련 문제