javascript 单击时折叠 div
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13098863/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
fold div on click
提问by urjit on rails
I want to fold down the div onclick event and on another click want to fold up the div
我想折叠 div onclick 事件，并在另一次点击时折叠 div
my jquery is following
我的 jquery 正在关注
$(".fold_reply").click(function() {
if ($('.reply').css('display', 'none')) {
$(".reply").show("fold", {}, 500);
}
else {
$(".reply").hide("fold", {}, 500);
}
});?
and the div I want to fold is having display:none at the initial point
我想折叠的 div 是 display:none 在初始点
In My reply tag < div class="reply" style="display:none; " > at the initial reply is not shown
在我的回复标签 <div class="reply" style="display:none;"> 中没有显示初始回复
so when I click then div is fold down but on other div it is not fold up
Please help me
所以当我点击然后 div 向下折叠但在其他 div 上它没有折叠
请帮助我
采纳答案by Gabriele Petrioli
You should use the jquery .toggleor jquery UI .togglemethod which does just that.
您应该使用jquery.toggle或jquery UI.toggle方法来做到这一点。
But the error in your logic is the $('.reply').css('display', 'none'). This sets the displayto none. It does not check if it is none...
但是您逻辑中的错误是$('.reply').css('display', 'none'). 这将 设置display为none。它不检查它是否none...
If you had to use that code you should change it to
如果您必须使用该代码，则应将其更改为
if ( $('.reply').css('display') === 'none') )
回答by Levi Botelho
$(".fold_reply").click(function() {
$(".reply").toggle(500)
}
Toggle will show or hide the element depending on its current state, eliminating your if block.
Toggle 将根据元素的当前状态显示或隐藏元素，从而消除您的 if 块。
Check this fiddle out for an example:
以这个小提琴为例：
回答by Ankit Saxena
yes @levib answer is short and correct one to use. Another alternative is that you can use slideUp() and slideDown() functions.
是的@levib 答案简短且正确，可以使用。另一种选择是您可以使用 slideUp() 和 slideDown() 函数。
$(".fold_reply").click(function() {
if ($('.reply').css('display', 'none')) {
$(".reply").slideDown("slow");
}
else {
$(".reply").slideUp("fast");
}
});?
回答by charlietfl
Use the jQueryUI version of toggle()since you seem to be using a jQuery UI effect
使用 jQueryUI 版本，toggle()因为您似乎在使用 jQuery UI 效果
.toggle( effect [, options ] [, duration ] [, complete ] )
.toggle( 效果 [, 选项 ] [, 持续时间 ] [, 完成 ] )
Reference: http://api.jqueryui.com/toggle/
参考：http: //api.jqueryui.com/toggle/
$(".fold_reply").click(function() {
$(".reply").toggle("fold", 500);
})
回答by Sibu
$(".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>????????????????????????????????
