Question

我有一个带有一个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>

Answer 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">');      
}

JS FIddle DEMO

Answer 2

出于某种原因，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）

Answer 3

尝试将此添加到if语句中：

         $("#content p").css({"overflow" : 'scroll'});

http://jsfiddle.net/hslincoln/wNd44/1/

Jquery - 更改div大小（展开和折叠）后，滚动条消失

3 个答案: