点击折叠div

Question

我希望能够在点击事件中折叠div，并在另一次点击时展开div

我的jquery代码如下

$(".fold_reply").click(function() {

    if ($('.reply').css('display', 'none')) {
        $(".reply").show("fold", {}, 500);
    }
    else {
        $(".reply").hide("fold", {}, 500);
    }

});​

我希望折叠的div在初始时是display:none。

在我的回复标签中，< div class="reply" style="display:none; " > 初始时未显示回复。

因此，当我点击时，div会展开，但其他div不会折叠起来。
请帮助我。

- urjit on rails

---

你正在使用jQuery UI吗？ - Asad Saeeduddin

Answer 1

$(".fold_reply").click(function() {
    $(".reply").toggle(500)
}

切换将根据其当前状态显示或隐藏元素，消除您的if块。

请查看此示例：

http://jsfiddle.net/z9rGz/3/

- Levi Botelho

Answer 2

是的@levib的答案很简短且正确。另一种选择是使用slideUp()和slideDown()函数。

$(".fold_reply").click(function() {

    if ($('.reply').css('display', 'none')) {
        $(".reply").slideDown("slow");
    }
    else {
        $(".reply").slideUp("fast");
    }

});​

- Ankit Saxena

Answer 3

您应该使用 jQuery的.toggle 或 jQuery UI的.toggle 方法来实现这一点。

但是您的逻辑错误在于 $('.reply').css('display', 'none')。 这会将 display 设置为 none，而不是检查它是否为 none...

如果您必须使用该代码，则应将其更改为：

if ( $('.reply').css('display') === 'none') )

- Gabriele Petrioli

Answer 4

使用jQueryUI版本的toggle()，因为您似乎正在使用jQuery UI效果

.toggle( effect [, options ] [, duration ] [, complete ] )

参考资料：http://api.jqueryui.com/toggle/

$(".fold_reply").click(function() {
     $(".reply").toggle("fold",  500);
})

- charlietfl

Answer 5

$(".fold_reply").click(function() { 
     var style=$('.reply').css('display');
    if (style=='none') {
        $(".reply").show(500);
    }
    else {
        $(".reply").hide(500);
    }

});​

<input type="button" class='fold_reply' value="button">

<div class='reply'>
    text<br/>text<br/>text<br/>text<br/>text
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

工作演示

- Sibu