点击时折叠div答案

【问题标题】：fold div on click点击时折叠div
【发布时间】：2012-10-27 17:58:55
【问题描述】：

我想折叠 div onclick 事件，在另一次点击时想折叠 div

我的 jquery 正在关注

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

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

});

我要折叠的 div 在初始点有 display:none

在我的回复标签中

【问题讨论】：

你在使用 jQuery UI 吗？

标签： javascript jquery html css fold

【解决方案1】：

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

Toggle 将根据元素的当前状态显示或隐藏元素，从而消除你的 if 块。

查看这个小提琴的例子：

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

【讨论】：

【解决方案2】：

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

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

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

});

【讨论】：

【解决方案3】：

您应该使用jquery .toggle 或jquery UI .toggle 方法来做到这一点。

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

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

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

【讨论】：

【解决方案4】：

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

.toggle(效果[,选项][,持续时间][,完成])

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

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

【讨论】：

【解决方案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>

Working Demo

【讨论】：