내가 달성하고 싶은 것은 현재 페이지 $().hide()에서 자식을 숨기고 div그 자리에 새 div를 표시하는 애니메이션 인 jQuery를 호출 한 후 입니다.
을 호출하면 .hide()부모 div의 크기가 조정되고 원하지 않습니다.
는 parent두 거기에 div를하는이 text작성 사업부, 나는 단지 텍스트 만 DIV 남아 숨기기 호출 할 때 그래서 문제의 사업부를. height새 콘텐츠의 높이가 같을 것이기 때문에을 동일하게 유지하고 싶습니다 .
내가 가진 것은 다음과 같습니다.
<div class="adminContent"> //Wrapper div, this should not change in height of 668px
<div class="adminTitle"> // Text only div, remains after .hide is called
<a href="~/Admin/Index">Admin</a> > Manage Class Roster
</div>
<div class="resetBody" id="manageClassBody1"> // Div that is being hidden/replaced
... // div contents
</div>
CSS
.adminContent {
background: #F7F7F7;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
min-height: 668px;
}
자식 div를 숨긴 후 높이가 고정되도록 어떻게해야합니까? 감사!
편집 : 두 div 사이를 전환하는 애니메이션으로 두 div를 제자리에 교체하고 싶습니다. replaceWith()jQuery 에서 제공하는 것을 보았지만 내 필요에 따라 사용하는 방법을 잘 모르겠습니다.
JQuery의 애니메이션 기능을 사용하여 작업을 수행하는 것이 좋습니다.
나는 당신을 위해 샘플 JSBin 을 만들었습니다 .
예:
$(document).on("click", "#togglebtn", function() {
var divs = $('.resetBody, .resetBody2');
var hiddenDiv = divs.filter(":not(:visible)");
var visibleDiv = divs.filter(":visible");
visibleDiv.fadeToggle({
complete: function() {
hiddenDiv.fadeToggle();
}
});
});.adminContent {
background-color: lightgreen;
padding: 10px;
}
.resetBody {
background-color: #880000
}
.resetBody2 {
background-color: lightblue
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="adminContent">//Wrapper div, this should not change in height of 668px
<div class="adminTitle">much text wow! much text wow! much text wow! much text wow! much text wow!
<a href="~/Admin/Index">Admin</a> > Manage Class Roster
</div>
<div class="resetBody">Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>Div 1
<br/>
</div>
<div class="resetBody2" style="display:none">Div 2 is taller
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>Div 2
<br/>
</div>
</div>
<div style="margin-top:10px;">
<button id="togglebtn">Toggle</button>
</div>이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다