jquery - 显示 : none on container element breaks jquery absolute positioning calculation childrens child elements

Question

HTML:

<a href="" id="show_link">Show</a><div id="container">
<form class="form">
    <a href="" class="align_middle">Link1</a>
</form>
<form class="form">
    <a href="" class="align_middle">Link2</a>
</form>
<form class="form">
    <a href="" class="align_middle">Link3</a>
</form>

Javascript:

var align_middle = function(element) {

    var sidePadding = 20;

    $(element).css("position", "static");
    $(element).css("float", "left");
    $(element).css("width", "auto");

    var width = $(element).width();
    var parentWidth = $(element).parent().width();

    width = Math.min(width, parentWidth - sidePadding*2);
    $(element).css("width", width);

    var height = $(element).height();
    var parentHeight = $(element).parent().height();
    var top = (parentHeight - height)/2;
    var left = (parentWidth - width)/2;

    $(element).css("position", "absolute");
    $(element).css("left", left + "px");
    $(element).css("top", top + "px");

    $(element).css("float", "");
};

$(document).ready(function(){

    var elements = $(".align_middle");

    $.each(elements, function(key,value){
            align_middle(value);
    });

    $(elements).bind("DOMNodeInserted",function(){
            align_middle(this);
    });


    $("#show_link").click(function(event){
            event.preventDefault();
            $("div#container").toggle();
    });

});

CSS:

.form {
    position: relative;
    border-color: brown;
    border-width: 3px;
    border-style: dotted;
    width: 150px;
    height: 150px;
    float:left;
    margin-left: 10px;
    overflow: hidden;
}
div#container{
    overflow: auto;
    margin-top: 10px;
}

我想隐藏带有 css 属性 display: none 的 div#container；所以它在页面加载时隐藏，但它破坏了 align_middle 函数。

当我通过 $.get 回调函数隐藏元素时，效果很好。 (切换链接也有效。)

为什么会这样？

fiddle :http://jsfiddle.net/7PELA/3/

Answer 1

从 DOM 的 Angular 来看，CSS display:none; 属性完全删除或不处理浏览器中的元素，因此 jQuery 无法正确计算它需要的内容。而是使用 CSS 中的 Visibility 属性并将其设置为隐藏。

更新的 HTML:

<a href="" id="show_link">Show</a>
<div id="container" class="hide">
    <form class="form">
        <a href="" class="align_middle">Link1</a>
    </form>
    <form class="form">
        <a href="" class="align_middle">Link2</a>
    </form>
    <form class="form">
        <a href="" class="align_middle">Link3</a>
    </form>
</div>

更新的 CSS:

.form
{
position:relative;
border-color:brown;
border-width:3px;
border-style:dotted;
width: 150px;
height: 150px;
float:left;
margin-left:10px;
overflow:hidden;
}

div#container
{
overflow:auto;
margin-top:10px;
}

.hide {
    visibility:hidden;
}

更新的 jQuery:

var align_middle = function(element){

    var sidePadding = 20;

    $(element).css("position", "static");
    $(element).css("float", "left");
    $(element).css("width", "auto");

    var width = $(element).width();
    var parentWidth = $(element).parent().width();

    width = Math.min(width, parentWidth - sidePadding*2);
    $(element).css("width", width);

    var height = $(element).height();
    var parentHeight = $(element).parent().height();
    var top = (parentHeight - height)/2;
    var left = (parentWidth - width)/2;

    $(element).css("position", "absolute");
    $(element).css("left", left + "px");
    $(element).css("top", top + "px");

    $(element).css("float", "");

};

$(document).ready(function(){

    var elements = $(".align_middle");

    $.each(elements, function(key,value){

        align_middle(value);

    });

    $(elements).bind("DOMNodeInserted",function(){
        align_middle(this);
    });


    $("#show_link").click(function(event){
        event.preventDefault();
        $("div#container").toggleClass('hide');
    });

});