Question

我想折叠div onclick事件，而另一次点击想要折叠div

我的jquery正在关注

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

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

});

我想要折叠的div在初始点显示：none

在我的回复标签中＆LT; div class =“reply”style =“display：none;”＆gt;在初始答复中未显示

因此当我点击时，div会向下折叠，但在其他div上则不折叠请帮帮我

Answer 1

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

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

检查这个小提琴的例子：

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

Answer 2

是的@levib答案很简短且正确使用。另一种选择是你可以使用slideUp（）和slideDown（）函数。

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

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

});

Answer 3

您应该使用jquery .toggle或jquery UI .toggle方法来实现这一目标。

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

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

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

Answer 4

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

.toggle（效果[，选项] [，持续时间] [，完成]）

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

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

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>

<强> Working Demo

折叠div点击

5 个答案: