Question

jsFiddle here.

我正在使用JQuery 1.5.2切换div的高度，它似乎工作得很好。但是，下边界线在生长时不会重新定位，但在收缩时会重新定位。

Chrome和IE9的结果相同（我在前两个浏览器之后停止尝试其他浏览器，因为它们是我的主要目标，并且大多数都是兼容的。）什么给出了？

我尝试了什么：

隐藏并重新绘制边框
jQuery的不同（较新）版本
animate({height: x}, y)代替css('height', x)

Answer 1

使用此代码，

$("#siteMapToggle").click(function() {
    var temp = $(this).attr("srcAlt");
    $(this).attr("srcAlt", $(this).attr("src"));
    $(this).attr("src", temp);

    if ($("#fullmenu .menu_tbl").is(':visible')) {
        $("#fullmenu").css('height', '100px');
        $("#fullmenu .menu_tbl").hide();
    }
    else {

        $("#fullmenu .menu_tbl").show();
        $("#fullmenu").css('height', '267px');
    }
});

http://jsfiddle.net/vtex4/4/

Answer 2

您可以使用基于 overflow css样式和类的简单行为来显示/隐藏border-bottom：

<强> JS

$("#siteMapToggle").click(function() {

    $("#fullmenu .menu_tbl").toggle("fast", function() {
        $("#fullmenu").toggleClass('borderHide')
    });

}）;

<强> CSS

#fullmenu{
    width:900px;
    border-top:3px solid #999;
    border-bottom:3px solid #999;
    overflow:auto
}

.borderHide {
    border-bottom:3px solid #999;
}

在此处查看完整的jsfiddle：http://jsfiddle.net/vtex4/5/

JQuery Div高度变化的边界位置

2 个答案: