slide div 전체 div

jquery 토글 버튼 뒤에 내용이 숨겨져있는 페이지를 개발 중입니다. 클릭하면 콘텐츠 래퍼가 가로 및 세로로 확장되기를 원합니다 (현재 래퍼는 세로로만 확장됩니다).slide div 전체 div

내 파일을 구성하는 방법을 모르겠습니다.

#wrapper { 
width: 900px; 
margin: 0 auto; 
margin-top: 40px; 
background-color:#FFF; 
border-radius: 42px; 
-moz-border-radius:42px; 
padding:30px; 
-webkit-box-shadow: 0 0 10px #000; 
}

은 "패널"사업부를 통해 자바 스크립트를 제어 : 현재 래퍼는 이러한 CSS 속성을 가지고

<script type="text/javascript"> 
    $(document).ready(function(){ 

$(".btn-slide").click(function(){ 
    $("#panel").slideToggle("slow"); 
    $(this).toggleClass("active"); return false; 
}); 
    }); 
</script>

는 CSS에서 직접 #wrapper 폭 변경 될하기 위해 slideToggle 내부 컨텐츠의 원인 truncated : 즉. 너비가 설정된 경우 래퍼가 올바른 가로 크기로 확장되지 않습니다. 반면에 너비 특성을 제거하면 페이지가 더 이상 제대로 래핑되지 않습니다. 이 문제를 어떻게 해결해야합니까?
1.의 jQuery .animate() 대신 slideToggle 방법, 당신에게 당신이 필요로하는 모든 유연성을 제공합니다 :

<div id="wrapper" > 
<div id="intro" class="content-wrapper"><a href="#" class="btn-slide"><span class="content">CONTENT</span></a> 
    <div class="wrapper-inner container"><div class="home-page container"> 
     <div id="panel">

출처

2011-11-10 Nick B

일부 HTML도 볼 수 있습니까? – Kyle

일부 피들을 사용할 수 있습니까? http://jsfiddle.net/ –

답변 해 주셔서 감사합니다. 카일, 관련 HTML을 추가했습니다. 실비오, 나는 슬프게도 바이올린으로 답을 찾을 수 없었습니다. 조언 주셔서 감사합니다 –

내가 완전히이 개 가능한 솔루션을 확인 문제를 이해하지만, 여기에있는 것은 아닙니다.
2. 주변 레이아웃에 문제가있는 경우 래퍼를 고정 크기의 div에 배치하고 # 래퍼를 위치로 변경합니다. absolute

출처

2011-11-10 09:17:39 karnyj

감사 karnyj. 지금 애니메이션을 사용하고 있지만 클릭시 펼칠 수있는 너비를 확보하는 데 문제가 있습니다. 내 래퍼의 너비는 300px이지만 클릭시 900px로 확장하고 싶습니다. jquery 핸들은 패널로 설정되어 애니메이션을 통해 높이를 '토글'합니다. 버튼 클릭시 패널이 펼쳐질 때 래퍼 폭을 확장하려면 어떻게해야합니까? 고마워요 –

감사합니다 animate(); 대답은 –

slide div 전체 div

답변

관련 문제