使用jquery为可折叠手风琴创建自己的脚本

我有一个简单的手风琴代码片段。此时，您可以单击手风琴控制按钮，它将逐个打开每个面板。但是，我希望这样，当用户单击另一个

手风琴控件

按钮时，它会关闭当前显示的面板，并显示用户选择的内容

代码

$（函数（）{
$（'.accordion'）。打开（'单击'，'.accordion控件'，函数（e）{
e、 预防默认值（）；
$（'.accordion控件'）。removeClass（'active'）；
$（this）.next（'.accordion panel'）.addClass（'active'）.not（':animated'）.slideToggle（）；
})
})

手风琴按钮

同侧文字



手风琴按钮

同侧文字



手风琴按钮

同侧文字



手风琴按钮

同侧文字

使以下各项正常工作。如果这是你想要的，请告诉我。我决定在开始的时候也把它藏起来。如果要在开始时显示，还需要将活动类添加到所有面板中

$（'.accordion面板'）.hide（）；
$（'.accordion控件'）。单击（函数（）{
if（$（this）.next（'.accordion panel'）.hasClass（'active'））{
$（'.active'）.removeClass（'active'）.slideUp（）；
}否则{
$（'.active'）.removeClass（'active'）.slideUp（）；
$（this）.next（'.accordion panel'）.addClass（'active'）.slideDown（）；
}
});



手风琴按钮

同侧文字



手风琴按钮

同侧文字



手风琴按钮

同侧文字



手风琴按钮

同侧文字


使以下各项正常工作。如果这是你想要的，请告诉我。我决定在开始的时候也把它藏起来。如果要在开始时显示，还需要将活动类添加到所有面板中


$（'.accordion面板'）.hide（）；
$（'.accordion控件'）。单击（函数（）{
if（$（this）.next（'.accordion panel'）.hasClass（'active'））{
$（'.active'）.removeClass（'active'）.slideUp（）；
}否则{
$（'.active'）.removeClass（'active'）.slideUp（）；
$（this）.next（'.accordion panel'）.addClass（'active'）.slideDown（）；
}
});



手风琴按钮

同侧文字



手风琴按钮

同侧文字



手风琴按钮

同侧文字



手风琴按钮

同侧文字


我个人会以不同的方式处理这个问题

为什么不在任何时候单击一个手风琴时收缩所有手风琴，并显示单击的手风琴呢

压缩JSFIDLE：


$（'.accordion'）。打开（'click'，'accordion control'，函数（e）{
//任何时候，如果要多次使用选择器，请将其设置为变量
$ap=$（本）.next（“.accordion面板”）；
//限制关闭所有手风琴
如果（！$ap.hasClass（“活动”））{
//把所有的手风琴都拉上去
$（“.accordion panel”）.slideUp（）.removeClass（“活动”）；
//向下滑动手风琴
$ap.slideToggle（）.addClass（“活动”）；
}
});
。手风琴面板{
显示：无；
}



手风琴按钮

同侧文字



手风琴按钮

同侧文字



手风琴按钮

同侧文字



手风琴按钮

同侧文字


我个人会以不同的方式处理这个问题

为什么不在任何时候单击一个手风琴时收缩所有手风琴，并显示单击的手风琴呢

压缩JSFIDLE：


$（'.accordion'）。打开（'click'，'accordion control'，函数（e）{
//任何时候，如果要多次使用选择器，请将其设置为变量
$ap=$（本）.next（“.accordion面板”）；
//限制关闭所有手风琴
如果（！$ap.hasClass（“活动”））{
//把所有的手风琴都拉上去
$（“.accordion panel”）.slideUp（）.removeClass（“活动”）；
//向下滑动手风琴
$ap.slideToggle（）.addClass（“活动”）；
}
});
。手风琴面板{
显示：无；
}