我有一个带有一个div的布局,点击一个按钮会扩展到屏幕的大小。在扩展div之前有足够的内容强制它滚动。折叠回原始大小后,滚动条消失,一些内容被隐藏。
可能导致什么?我尝试在切换功能中再次设置溢出自动css,但它不起作用。
<?xml version="1.0" encoding="utf-8" ?>
<!doctype html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=8">
<title>Untitled 2</title>
<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
<script type="text/javascript">
$(function() {
var height = $( window ).height();
var width = $( window ).width();
canvasHeight = height - 282;
$("#mainCanvas").css({"height" : canvasHeight});
$("#header").css({"min-width" : width});
$("#mainCanvas").css({"min-width" : width});
$("#legend").css({"min-width" : width});
$("#footer").css({"min-width" : width});
$("#toggle").click(function() {
if($("#mainCanvas").height() != height) {
$("#header").hide();
$("#legend").hide();
$("#footer").hide();
$("#detail").animate({"top" : '0px'});
$("#toggle").animate({"top" : '0px'});
$("#mainCanvas").animate({"height": height}, {"queue": false, "duration": 500}).animate({"width": width}, 500);
$("#toggle").html('<img id="expand" src="img/collapse.png">');
}
else {
$("#mainCanvas").animate({"height": canvasHeight}, {"queue": false, "duration": 500}).animate({"width": '100%'}, 800);
$("#header").show();
$("#legend").show();
$("#footer").show();
$("#detail").animate({"top" : '92px'});
$("#toggle").animate({"top" : '92px'});
$("#toggle").html('<img id="expand" src="img/expand.png">');
}
}); // End Expand/Collapse
});
</script>
<style type="text/css">
html, body {
padding: 0;
margin: 0;
}
img#expand {
width: 20px;
cursor: pointer !important;
margin-left: 7px;
margin-top: 2px;
}
/* Application Details */
div#toggle {
left: 95%;
top: 92px;
width: 34px;
height: 29px;
border: 1px solid #ccc;
background: white;
padding-top: 5px;
position: fixed;
}
</style>
</head>
<body>
<div id="header" style="float: left; width: 100%; height: 92px; background: fuchsia;"></div>
<div id="mainCanvas" style="float: left; width: 100%; background: blue; overflow: auto;">
<div id="toggle"><img id="expand" alt="" src="img/expand.png"></div>
<div id="content" style="width: 100%"><p>Paragraph ParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraphParagraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p><p>Paragraph</p></div>
</div>
<div id="legend" style="float: left; width: 100%; height: 140px; background: lime;"></div>
<div id="footer" style="float: left; width: 100%; height: 50px; background: gray;"></div>
</body>
</html>
答案 0 :(得分:1)
仅修改其他部分
else {
$("#mainCanvas").css('overflow','auto', 'important');
$("#mainCanvas").animate({"height": canvasHeight}, {"queue": false, "duration": 500});
$("#header").show();
$("#legend").show();
$("#footer").show();
$("#detail").animate({"top" : '92px'});
$("#toggle").animate({"top" : '92px'});
$("#toggle").html('<img id="expand" src="img/expand.png">');
}
答案 1 :(得分:1)
出于某种原因,jquery正在将#mainCanvas的 overflow css属性转换为隐藏。 快速解决问题的方法是将其设置回&#34; auto&#34;在动画的完整的参数中:
$("#toggle").click(function() {
if($("#mainCanvas").height() != height) {
$("#header").hide();
$("#legend").hide();
$("#footer").hide();
$("#detail").animate({"top" : '0px'});
$("#toggle").animate({"top" : '0px'});
$("#mainCanvas").animate({"height": height}, {"queue": false, "duration": 500}).animate({"width": width}, 500,function() {
$(this).css("overflow","auto")
});
$("#toggle").html('<img id="expand" src="img/collapse.png">');
}
else {
$("#mainCanvas").animate({"height": canvasHeight}, {"queue": false, "duration": 500}).animate({"width": '100%'}, 800,function() {
$(this).css("overflow","auto")
});
$("#header").show();
$("#legend").show();
$("#footer").show();
$("#detail").animate({"top" : '92px'});
$("#toggle").animate({"top" : '92px'});
$("#toggle").html('<img id="expand" src="img/expand.png">');
}
}); // End Expand/Collapse
(适用于IE 8.0)
答案 2 :(得分:0)