Question

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

我也在尝试在页面加载时显示DIV。我甚至不确定这是否可以用我编写代码的方式。

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

我试图避免使用.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 ：似乎动画有点不稳定 - 当你设置'height：auto'时 - div从头开始可见，但是关闭按钮会在第一次点击时忽略动画（我有最新的Chrome）更新）所以我添加了一些解决方法。还为其他浏览器（如Firefox和Opera）添加了其他样式以支持此动画，而不仅仅支持那些支持-webkit的人。

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

在CSS中添加了类并从主样式中删除了“transition”：

.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已经具有适当的大小 //阻止第一次点击瞬间关闭，不知道为什么 $（ “＃容器”）的高度（$（ “＃内容”）的高度（））;

$('#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

您正在尝试将其更改为按钮？

<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 height属性设置为零不是一个好习惯。

是否要在加载页面或完成加载（DOM已准备好）时显示div？

您的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();
});

使用的方法的文档：

Answer 4

$('#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 5

我看到你使用了-webkit-transition这对我的Chrome有用，但我想你希望它能在其他浏览中工作而不是webkit。

我可以通过两种方式建议，一种是简单地添加-moz-transition: height 1s ease-in-out;和transition: height 1s ease-in-out;来使用css3来实现它，但这对于较旧的浏览器不会有帮助。

另一种方法是在要折叠的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/

展开/折叠Div

6 个答案: