아코디언 높이가 작동하지 않음

Question

나는 토글 소방관을 클릭하면 height:auto으로 애니메이트되기를 원하지만 아무 것도 일어나지 않는 것 같습니다. 숨겨진 내용이있는 아코디언이 height:0으로 설정되어 있습니다. CSS3와 같은 최신 솔루션에 의존 할 수 없습니다.

http://codepen.io/anon/pen/uaytq

HTML :

<div class="collapse-group"> 
    <div class="collapse-header"> 
     <h1>Some Title</h1> 
    </div> 
    <div class="collapse-toggle"> 
     <div class="icon">&plus;</div> 
    </div> 
    <div class="collapse-content"> 
     Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! Check out all this filler content! 
    </div> 
</div> 

jQuery를 :

$('.collapse-toggle').click(function() { 
    var that = $(this).find('.collapse-content'); 
    that.animate({'height':'auto'}, 500); 
}); 

CSS :

.wrap { 
    background:#999999; 
    margin:0 auto; 
    width:500px; 
} 
.collapse-toggle { 
    background: transparent; 
    position: absolute; 
    left: 50%; 
    margin-left: -30px; 
    bottom: -60px; 
    cursor: pointer; 
} 
.collapse-toggle .icon { 
    width: 60px; 
    height: 60px; 
    font-size: 80px; 
    line-height: 60px; 
    text-align: center; 
    vertical-align: middle; 
    position: relative; 
    margin: 0 auto; 
    color: #f79727; 
    background: white; 
    z-index: 9; 
} 
.collapse-group { 
    *zoom: 1; 
    position: relative; 
    padding-top: 2em; 
} 
.collapse-group:before, 
.collapse-group:after { 
    content: ""; 
    display: table; 
} 
.collapse-group:after { 
    clear: both; 
} 
.collapse-group.we-create { 
    padding-top: 0; 
} 
.collapse-group.orange { 
    background: #f79727; 
} 
.collapse-group.orange .section-headline, 
.collapse-group.orange .section-tagline { 
    color: white; 
} 
.collapse-group.orange .icon { 
    color: white; 
    background: #f79727; 
} 
.collapse-group .collapse-content { 
    height: 0; 
    overflow: hidden; 
} 

Answer 1

높이를 알거나 높이 접근 방법을 사용할 필요가 없습니다, 다음을 시도

http://jsfiddle.net/19byov36/ 또는 http://codepen.io/anon/pen/vtsLd

$('.collapse-toggle').click(function() { 
    var that = $(this).next(); 
    that.slideToggle(); 
}); 

하거나 한 줄에 모든 것을 할 수 있습니다

$(this).next().slideToggle(); 

CSS

.collapse-group .collapse-content { 
    display: none; 
} 

내용이 상위에 통과 할 수있는 다음 요소는 다음

$(this).find('.collapse-content'); 

이 붕괴하기 때문에 작동하지 않습니다

원래 코드에서 내용

$(this).closest('.collapse-group').find('.collapse-content'); 

을 찾을 수없는 경우에, 제공된 코드를 작동 - 내용은 토글의 하위 항목이 아닙니다. 또한 콘텐츠의 높이 0을 제거하고 디스플레이로 변경하지 않았습니다.

Answer 2

또한 slideDown a를 사용할 수 있습니다 사용 높이 : 자동. 여기를 참조하십시오 :

$('.collapse-toggle').click(function() { 
    var that = $(this).parent().find('.collapse-content'); 
    that.slideDown(500); 
}); 

jsFiddle은 또한 당신의 CSS를이 있었다 :

.collapse-group .collapse-content { 
    height:auto; 
    display:none; 
    overflow: hidden; 
} 

당신은 또한 부모를 포함 할 필요가 방금 that.slideToggle(500);

에 대한 that.slideDown(500);을 변경해야 할 요소를 전환하려면 find() 전에()를 호출하여 적절한 장소에 .collapse-content 클래스를 찾을 수 있습니다.

Answer 3

너는 높이를 정의 할 필요가 없다. JS를 수정하여 토글시 클래스를 간단히 추가 및 제거하십시오. 높이 "자동"이 작동하고 CSS 전환이 올바르게 표시됩니다. 문제는 귀하의 코드 in에있는 현재 JS에 있습니다. 이런 식으로 뭔가를 시도 :

var $accordion = jQuery('.accordion'); 

$accordion.on('click', '.toggle', function(e) { 
    e.stopPropagation(); 

    var $thisToggle = jQuery(e.currentTarget); 
    $thisToggle.parent().toggleClass('expanded'); 
}); 

은 그럼 당신은 CSS와 효과를 만들 수있는 ".toggle"클래스에 의존 할 수 있습니다.