css FAQ Accordian单击时折叠

vxqlmq5t  于 2022-11-27  发布在  其他
关注(0)|答案(3)|浏览(117)

我的网站上有一个折叠式常见问题解答部分。当你单击标题时,它会展开,但我希望当你再次单击标题时,它会折叠起来。当我单击展开的部分时,我如何使它折叠起来?我包括了我在教程中使用的代码片段,希望它能起作用。

已编辑:修复了代码段,它现在应该展开,我想知道当我再次单击展开部分的标题时,如何使它折叠。

于飞:
第一个

kr98yfug

kr98yfug1#

这看起来像是来自一个旧教程。对于一个 accordion 来说,这太多的代码了!
你需要两样东西:一些交换和一些CSS。

切换:

$(document).ready(function(){

  $(document).on('touchstart click', '.acc-btn', function(){

    $(this).toggleClass('selected');

  });

});

CSS:

.acc-content {
  height:0px;
}
.selected + .acc-content {
    height: auto;
}
.selected h1 {
  color:#1ABC9C;
}

如果您希望一次只显示一个窗格...

$(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
}

这里有一把小提琴:http://jsfiddle.net/0sfn0gqk/

hgqdbh6s

hgqdbh6s2#

基本上,只需检查标题是否已展开,如果已展开,则删除selected类并将targetHeight更改为0
第一个

ckx4rj1h

ckx4rj1h3#

你只需要检查点击的部分是否是展开的部分,然后反向做你的动画,并从其中删除你“选择的”类。我还要补充一点,这是更好的处理方法,简单地使用CSS3来做动画和调整大小,使用JS来添加和删除类。查看这个链接。
How can I transition height: 0; to height: auto; using CSS?
第一个

相关问题