我有一个动态加载信息的页面。内容加载,但问题是包含内容(content_container)的 div 会导致页面大小增加(这是预期的),但会导致页脚、页眉和 content_type_container 无法修复。如果在加载内容后调整 html 元素,我希望它。
这是html:
<div id="content_container">
</div>
<div id="content_type_container" style="display:none;">
<div class="content_type">
Content Type 1
<input type="hidden" value="1" class="content_type_value"/>
</div>
<div class="content_type">
Content Type 2
<input type="hidden" value="2" class="content_type_value"/>
</div>
</div>
这是jQuery:
$(document).ready(function() {
$(".content_type").click(function() {
var content_type = $(this).find(".content_type_value").val();
content_type = $.trim(content_type);
if(content_type)
{
$.ajax({
url: "content_type_ajax.php",
data: "content_type="+content_type,
success: function(msg) {
$("#content_container").html(msg);
$("#content_container").click(); /* adding this reset the header and footer divs to the new height of the content container. fixing the issue */
}
});
}
});
$("#content_type_nav").click(function() {
$("#content_type_container").slideToggle("fast");
});
$(".content_type").click(function() {
$("#content_type_container").slideToggle("fast");
});
});
和CSS:
#content_container{
display:block;
}
#content_type_container{
position:fixed;
display:block;
bottom:0px;
width:100%;
z-index:1000;
}
.content_type{
display:block;
width:100%;
text-align:center;
}
.content_type:hover{
background:blue;
color:white;
}