展开/折叠 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");
});

​

Answer 2

如果您可以使用toggle，那么您只需要$("#this").toggle('slow');，但您必须将height: 0; 替换为display: none;

Answer 3

$('#click-meopen').click(function() {
    $('#this').show();
});

$('#click-meclose').click(function() {
    $('#this').hide();
});​

http://jsfiddle.net/XUjAH/95/

或使用切换

$('#click-meopen').click(function() {
    $('#this').toggle();
});

http://jsfiddle.net/XUjAH/96/

Answer 4

您想将其更改为按钮？

<input type="submit" id="click-meopen" value="open"></input>
<input type="submit" id="click-meclose" value="close"></input>
<div id="this">here<br />is<br />a<br />bunch<br />of<br />content<br />sdf</div>

这并不难。

我还建议您使用 jQuery 的 .toggle() 或 .show(),.hide() 方法。仅将 CSS 高度属性设置为零并不是一个好习惯。

你想在页面加载时或完成加载时显示 div 吗（DOM 已准备好）？

您的 JavaScript 代码将是：

$('#click-meopen').click(function() {
    $('#this').show(); // or .toggle()
});

$('#click-meclose').click(function() {
    $('#this').hide(); // or .toggle()
});​

如果您只使用一个按钮，则应使用.toggle() 方法，否则请坚持使用.show(),.hide() 方法！

当 DOM 准备好时（页面完全加载）：

$(document).ready(function(){
     $('#this').show();
});

所用方法的文档：

• http://api.jquery.com/show/
• http://api.jquery.com/hide/
• http://api.jquery.com/toggle-event/
• http://api.jquery.com/ready/

Answer 5

我看到你使用了-webkit-transition，它在 chrome 中对我有用，但我想你希望它在 webkit 以外的其他浏览器中工作。

我可以建议两种方法，一种是简单地添加 -moz-transition: height 1s ease-in-out; 和 transition: height 1s ease-in-out; 以使用 css3 执行此操作，但这在较旧的 ie 浏览器中无济于事。

另一种方法是在要折叠的 div 中的文本中放置一个 div：

<div id="this">
    <div id="height">
         text
         text
     </div>
</div>

然后在您的 javascript 中，您可以获得内部 div 元素的高度，这样您就可以使用 animate 而不是 height: auto。

$('#click-meopen').click(function() {
    $('#this').animate({'height': $('#height').height()}, 1000);
});

$('#click-meclose').click(function() {
    $('#this').animate({'height': 0}, 1000);
});

这对你来说应该足够了。

​

Answer 6

    $('#click-meopen').click(function() {
        $("#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() {
        $('#this').css('height','0');
    });

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

http://jsfiddle.net/XUjAH/100/