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回调函数隐藏元素时，它工作得很好。（切换链接也可以。）

为什么它会像这样？

小提琴：http://jsfiddle.net/7PELA/3/

Answer 1

这是怎么回事？ http://jsfiddle.net/7PELA/4/

在＆＃34;点击切换＆＃34;之后只需要一点$("#show_link").trigger('click');功能无需设置display:none

Answer 2

DOM透视图中的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');
    });

});

显示：容器元素上没有中断jquery绝对定位计算子元素子元素

2 个答案: