html - 展开/折叠 Div

Question

我正在尝试创建两个按钮，一个用于展开 div，一个用于折叠它。我试图修改这段代码，但我似乎无法让它工作。我想我只是不明白如何不切换链接。

我还试图让 DIV 在页面加载时出现。我什至不确定我编写代码的方式是否可行。

任何人都可以帮助我了解我需要做什么才能让它发挥作用。

http://jsfiddle.net/XUjAH/93/

我试图避免使用 .slideUp/.slideDown，它似乎会干扰我在页面上使用的另一个插件。

  $('#click-meopen').click(function() {
    var height = $("#this").height();
    if( height > 0 ) {
        $('#this').css('height','0');
    } else {
        $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
        var newHeight = $("#this").height();
        $("#this").css({'position':'static','visibility':'visible','height':'0'});
        $('#this').css('height',newHeight + 'px');
    }
});

$('#click-meclose').click(function() {
    var height = $("#this").height();
    if( height > 0 ) {
        $('#this').css('height','0');
    } else {
        $("#this").css({'position':'absolute','visibility':'hidden','height':'auto'});
        var newHeight = $("#this").height();
        $("#this").css({'position':'static','visibility':'visible','height':'0'});
        $('#this').css('height',newHeight + 'px');
    }
});

Answer 1

以下所有文字只是恕我直言 :)

在这里查看我的示例 - http://jsfiddle.net/XUjAH/99/

html:

<p id="click-meopen">click me to open</p>
<p id="click-meclose">click me to close</p>
<div id="this">
    <div id="content">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>
</div>

对于 JS:

$('#click-meopen').click(function() {
    $("#this").height($("#content").height());

});
$('#click-meopen').click();

$('#click-meclose').click(function() {
    $("#this").height('0');
});​

至于 CSS，它应该与您拥有的相同。

UPD:似乎动画有点不稳定 - 当您设置“高度:自动”时 - div 从一开始就可见，但是关闭按钮在第一次点击时忽略动画(我有最新的 Chrome更新)所以我添加了一些解决方法。还添加了其他样式以支持其他浏览器(如 Firefox 和 Opera)的此动画，而不仅仅是那些支持 -webkit 的浏览器。

http://jsfiddle.net/XUjAH/110/

在 CSS 中添加类并从主要样式中删除“过渡”:

.with-animation {
    -webkit-transition: height 1s ease-in-out;
    -moz-transition: height 1s ease-in-out;
    -o-transition: height 1s ease-in-out;
    transition: height 1s ease-in-out;
}

在 JS 中: //但是我们的 div 在这一行中已经有了合适的大小 //防止第一次点击瞬间关闭，不知道为什么 $("#container").height($("#content").height());

$('#click-meopen').click(function() {
    $("#container").height($("#content").height()); 
});

$('#click-meclose').click(function() {
    // If we add class with-animation on upper level div will
    // start animation on page load
    $("#container").height('0').addClass("with-animation");
});