Javascript 常见问题解答手风琴折叠点击

我的网站上有一个手风琴常见问题部分。当前，当您单击标题时，它会展开，但我希望当您再次单击标题时，它会折叠。 单击展开的分区时，如何使其折叠？我在教程中包含了我正在使用的代码片段，希望能奏效

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

HTML:

$（文档）.ready（函数（）{
时间=300，
clickPolice=false；
$（文档）.on（'touchstart click'，'acc btn'，函数（）{
如果（！clickPolice）{
clickPolice=true；
var currendex=$（this）.index（'.acc btn'），
targetLight=$（'.acc content-inner'）.eq（currendex）.outerHeight（）；
$（'acc btn h1'）。removeClass（'selected'）；
$（this.find（'h1'）.addClass（'selected'）；
$（'.acc content'）.stop（）.animate（{height:0}，animTime）；
$（'.acc content'）.eq（currendex）.stop（）.animate（{height:targetHeight}，animTime）；
setTimeout（函数（）{clickPolice=false；}，animTime）；
}
});
});
*{
-webkit框大小：边框框；
-moz框大小：边框框；
-o型盒尺寸：边框盒；
框大小：边框框；
}
html，正文{
背景：#FFFFFF；
}
.acc集装箱{
宽度：90%；
保证金：30px自动0自动；
-webkit边界半径：8px；
-moz边界半径：8px；
-o-边界半径：8px；
边界半径：8px；
溢出：隐藏；
}
.acc btn{
宽度：100%；
保证金：0自动；
填充：20px 25px；
光标：指针；
背景#34495E；
边框底部：1px实心#2C3E50；
}
.acc内容{
高度：0px；
宽度：100%；
保证金：0自动；
溢出：隐藏；
背景#2C3E50；
}
.acc内容内部{
填充：30px；
}
.打开{
高度：自动；
}
h1{
字体：700 20px/26px“拉托”，无衬线；
颜色：#ffffff；
}
p{
字体：400 16px/24px“拉托”，无衬线；
颜色：#798795；
}
.选定{
颜色：#1ABC9C；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
在苏打水产品中，可以连续使用，也可以使用发酵剂。前庭。在ultricies erat nisl中，使用了一种维维拉流苏。Phasellus vel sodales Elite。Morbi nec Adipising dolor。维瓦摩斯·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维

马萨的库拉比图尔和迪亚姆·多洛·阿利奎特。
无便利。位于奥迪奥·拉西尼亚的多洛苏打水项目，位于威尼斯马萨洛博蒂斯。Morbi congue Dignessim nisi孕妇咨询公司。Lorem ipsum dolor sit amet，是一位杰出的献身者。直径为零。努克和莫里斯·坦普斯、马萨维尔、佩伦茨克维尔特。这是一个很好的例子。努克·塞德·奥迪奥·尼西。最早的，生命之脊，超高人马座。pulvinar酒店

Proin faucibus sem为dapibus dapibus设计。
ultricies risus quis magna convallis，ac调味品tellus laoreet。请不要发表意见，不要发表意见

前庭是一个巨大的前庭。
这是我的荣幸。在奥古斯乌尔纳（augue urna），朗卡斯（rhoncus ac tellus non），马莱苏阿达港（porta malesuada magna）。在马莱苏阿达·夸姆·瓦里乌斯（malesuada quam varius）的梅特斯·朗库斯（metus rhoncus）的奥奇河（Nulla tincidunt orci）。毛里斯·塞德·马萨，乌特·马格纳。佩伦特斯式的萨皮恩·图尔皮斯（cursus sapien turpis），我的名字是温文尔雅的麦格纳·坦普斯（magna tempus）

基本上，只需检查您的标题是否已展开，如果已展开，请删除所选的
类，并将
目标项改为
0


$（文档）.ready（函数（）{
时间=300，
clickPolice=false；
$（文档）.on（'touchstart click'，'acc btn'，函数（）{
如果（！clickPolice）{
clickPolice=true；
var currendex=$（this）.index（'.acc btn'），
isExpanded=$（this）.find（'h1'）.hasClass（'selected'），
targetLight=isExpanded？0:$（'.acc content-inner'）.eq（currendex）.outerHeight（）；
$（'acc btn h1'）。removeClass（'selected'）；
$（this）.find（'h1'）.toggleClass（'selected'，！isExpanded）；
$（'.acc content'）.stop（）.animate({
身高：0
}时间）；
$（'.acc content'）.eq（currendex）.stop（）.animate({
高度：目标光
}时间）；
setTimeout（函数（）{
clickPolice=false；
}时间）；
}
});
});
*{
-webkit框大小：边框框；
-moz框大小：边框框；
-o型盒尺寸：边框盒；
框大小：边框框；
}
html，
身体{
背景：#FFFFFF；
}
.acc集装箱{
宽度：90%；
保证金：30px自动0自动；
-webkit边界半径：8px；
-moz边界半径：8px；
-o-边界半径：8px；
边界半径：8px；
溢出：隐藏；
}
.acc btn{
宽度：100%；
保证金：0自动；
填充：20px 25px；
光标：指针；
背景#34495E；
边框底部：1px实心#2C3E50；
}
.acc内容{
高度：0px；
宽度：100%；
保证金：0自动；
溢出：隐藏；
背景#2C3E50；
}
.acc内容内部{
填充：30px；
}
.打开{
高度：自动；
}
h1{
字体：700 20px/26px“拉托”，无衬线；
颜色：#ffffff；
}
p{
字体：400 16px/24px“拉托”，无衬线；
颜色：#798795；
}
.选定{
颜色：#1ABC9C；
}

Lorem ipsum dolor sit amet，是一位杰出的献身者。
在苏打水产品中，可以连续使用，也可以使用发酵剂。前庭。在ultricies erat nisl中，使用了一种维维拉流苏。Phasellus vel sodales Elite。莫比nec酒店
多洛。维瓦摩斯·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·维特·

马萨的库拉比图尔和迪亚姆·多洛·阿利奎特。
无便利。位于奥迪奥·拉西尼亚的多洛苏打水项目，位于威尼斯马萨洛博蒂斯。Morbi congue Dignessim nisi孕妇咨询公司。Lorem ipsum dolor sit amet，是一位杰出的献身者。
$(document).ready(function(){

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

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

  });

});

.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');

  });

});

.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
}