jquery에서 슬라이딩 div

Question

내 사이트 상단에 툴바 유형 섹션을 만들려고합니다. 난 기본적으로 숨겨져있을 div 하나와 그 div의 맨 아래에 매달려있을 버튼이 필요합니다. 클릭하면 div가 아래로 내려 가야합니다 (버튼은 여전히 ​​아래쪽에 있음). 그리고 클릭 할 때, 그것은 뒤로 미끄러 져야합니다.

<div id="account_toolbar" style="background-color:#fff;"> 
    <div id="toolbar_contents" style="display:none;"> This is the account toolbar so far 
    </div> 
    <div id="button" style="background-color: #ff0000;"><%= image_tag "templates/_global/my_account.png", :id => "my_account_btn", :style => "float: right; margin-right: 100px;" %></div> 
</div> 

이미지 태그/루비를 사용하여 구문을 레일, 그래서 그에게 더 관심을 지불하지 : 여기

내가 현재 가지고있는 것입니다. 다른 이미지 태그처럼 렌더링됩니다.

$('#my_account_btn').click(function() { 
    $('#toolbar_contents').slideToggle(); 
}); 

그래서,이 실제로 대부분의 노력 : 여기

내가 사용하고 JQuery와있다. 그러나 내 문제는 툴바 콘텐츠 div가있는 간격이 계정 버튼을 아래로 밀었다는 것입니다. 그것이 위 또는 아래로 미끄러지면 일시적으로 div의 하단에 부착 된 다음 슬라이드가 끝나면 다시 아래로 점프합니다 (숨겨진 div의 하단과 계정 버튼의 상단 사이에 간격을 남김).

나는 그것이 의미가 있기를 바랍니다.

감사

Answer 1

자, 여러분 께 감사드립니다. 감사합니다.

위로 끝내는 부분은 하단 div (이미지/버튼을 잡고있는 div)를 버튼의 높이로 설정하는 것입니다. 이전에는 div가 표시되지 않고 브라우저에서 최종 높이가 0 픽셀이었습니다.

<div id="account_toolbar" style="background-color:#fff;"> 
    <div id="toolbar_contents" style=""> This is the account toolbar so far 
    </div> 
    <div id="button" style="background-color: #ff0000; height:59px;"><%= image_tag "templates/_global/my_account.png", :id => "my_account_btn", :style => "float: right; margin-right: 100px;" %></div> 
</div> 

빨강의 스타일 배경색이 전혀 표시되지 않았습니다. div가 어디에 나타나는지 잠시 확인했습니다.

어쨌든 다시 감사합니다!

Answer 2

당신이 당신의 요소 중 일부의 폭을 지정 해달라고 당신이 손상 될 순서에 떠 적용 할 수 있기 때문입니다. 이 아이디어를 얻으십시오.

<style> 
#account_toolbar{ 
    width:500px; 
} 
.toolbar_contents_wrapper{ 
    float:left; 
    width:400px; 
    height:100px; 
} 
#button{ 
    float:left; 
    width:300px; 
} 

.clear{ 
    clear:both; 
} 
</style> 


<div id="account_toolbar" style="background-color:#fff;"> 
    <div class="toolbar_contents_wrapper"> 
    <div id="toolbar_contents" style="display:none;"> This is the account toolbar so far 
    </div> 
</div> 
<div class="clear"></div> 
<div id="button" style="background-color: #ff0000;"><img src="#" id="my_account_btn" style="float: right; margin-right: 100px;" /></div> 
</div> 


<script> 
$(function(){ 
    $('#my_account_btn').click(function() { 
    $('#toolbar_contents').slideToggle(); 
}); 
}); 
</script> 

.toolbar_contents_wrapper에주의하십시오. 그러면 아래 버튼이 위/아래로 움직이지 않습니다. 이 코드를 테스트 한 결과 작동합니다.

Answer 3

display:none을 제거하고 대신 문서로드시 .hide()를 실행하십시오. 아래는 내 사이트에서 작동하는 코드입니다.

$(document).ready(function() { 
$('#toolbar_contents').hide(); 
    $('#my_account_btn').click(function() { 
    $('#toolbar_contents').slideToggle(400); 
    return false; 
    }); 
});