$(document).ready(function(){
$(document).on('touchstart click', '.acc-btn', function(){
// Next line 'closes' everything by removing the class selected from everything
// except the one we just clicked, otherwise it wouldn't toggle—
// the class would get removed and then added back two lines down.
$('.acc-container').find('.selected').not(this).removeClass('selected');
$(this).toggleClass('selected');
});
});
如果您想让它们在打开和关闭时具有动画效果,可以使用CSS:
.acc-content {
max-height:0px; //since we can't animate to height: auto;
-webkit-transition: all 0.35s ease-in-out 0s;
-moz-transition: all 0.35s ease-in-out 0s;
transition: all 0.35s ease-in-out 0s;
}
.selected + .acc-content {
max-height: 400px; // or whatever you think you'd need as a max
}
3条答案
按热度按时间kr98yfug1#
这看起来像是来自一个旧教程。对于一个 accordion 来说,这太多的代码了!
你需要两样东西:一些交换和一些CSS。
切换:
CSS:
如果您希望一次只显示一个窗格...
如果您想让它们在打开和关闭时具有动画效果,可以使用CSS:
这里有一把小提琴:http://jsfiddle.net/0sfn0gqk/
hgqdbh6s2#
基本上,只需检查标题是否已展开,如果已展开,则删除
selected
类并将targetHeight
更改为0
。第一个
ckx4rj1h3#
你只需要检查点击的部分是否是展开的部分,然后反向做你的动画,并从其中删除你“选择的”类。我还要补充一点,这是更好的处理方法,简单地使用CSS3来做动画和调整大小,使用JS来添加和删除类。查看这个链接。
How can I transition height: 0; to height: auto; using CSS?
第一个