Jquery 手风琴风格内容

我已经成功地制作了一个手风琴，当你点击标题时可以打开和关闭。我的问题是我不知道如何使它一次只能打开一个零件。因为就像现在这样，他们只是不断地打开然后跑掉。当一个打开，另一个被点击时，新的打开，旧的关闭，有可能这样吗

这是小提琴

代码遵循以下模式：

$('#accordianhead1').toggle(
    function () {
        $('#accordianbody1').animate({
             height: "110"
        }, 500);
        $('#open1').hide();
        $('#close1').show();
    },
    function () {
        $('#accordianbody1').animate({
             height: "0"
        }, 500);
        $('#open1').show();
        $('#close1').hide();
    }
);

---

目前代码非常重复。相反，我会通过类获取所有元素，在您的例子中是“accordionbody”，然后隐藏所有不是要显示的元素的元素，然后显示当前元素

使用$（'.accordionbody'）将返回一个元素数组，您可以根据需要对其进行操作

由此，您可以在单击时关闭所有手风琴，然后仅显示单击的手风琴

可以这样做：

    $(document).ready(function() {
        $('.accordianhead').on('click', function(elem) {
            console.log('running');
            $('.accordianbody').hide()
            $(elem.target).closest('.accordianhead').next().height('120px').show()
        });
    });

我帮你更新了你的装备

---

正如@Lou所说，只需选择一次all

.accordionhead

，即可简化代码

我修复了您的代码，并将动画保留为原始示例

请参阅对代码的评论

$（'.accordianhead'）。在（'单击'），
职能（e）{
//关闭所有其他动画
$（'.accordianbody'）。不是（$（this.next（））。设置动画({
高度：“0”
}, 500);
//显示所有打开和隐藏所有关闭
$（'.open'）.show（）；
$（'.close'）.hide（）；
//打开下一个动画元素，我的意思是，手风琴体
$（this）.next（）.animate({
高度：“110”
}, 500);
//隐藏的子对象。打开并显示子对象。关闭
$（this.find（'.open'）.hide（）；
$（this.find（'.close'）.show（）；
}
);
html，body，div，span，applet，object，iframe，
h1、h2、h3、h4、h5、h6、p、块报价、预，
a、 缩写，首字母缩写，地址，大，引用，代码，
del、dfn、em、img、ins、kbd、q、s、samp、，
小、走向、强、次、辅助、tt、var、，
b、 u，i，中心，
dl，dt，dd，ol，ul，li，
字段集、表单、标签、图例、，
表格、标题、正文、tfoot、THAD、tr、th、td、，
文章、旁白、画布、细节、嵌入、，
图，figcaption，页脚，页眉，H组，
菜单、导航、输出、ruby、节、摘要、，
时间、标记、音频、视频{
保证金：0；
填充：0；
边界：0；
字体大小：100%；
字体：继承；
垂直对齐：基线；
大纲：0px；
}
/*旧浏览器的HTML5显示角色重置*/
文章，旁白，细节，图表，
页脚、页眉、H组、菜单、导航、节{
显示：块；
}
身体{
线高：1；
}
#手风琴的
{
保证金：20px自动0自动；
宽度：98%；
}
手风琴头
{
光标：指针；
宽度：100%；
高度：35px；
边框底部：实心1px#575757；
背景：#1c1c；/*旧浏览器*/
背景：-莫兹线性梯度（顶部，#1c1c0%，#3a3a 48%，#1c1c100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、色挡（0%、#1c1cc）、色挡（48%、#3a3a）、色挡（100%、#1c1cc））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，#1c1c0%，#3a3a 48%，#1c1c100%）；/*铬10+，Safari5.1+*/
背景：-o-线性梯度（顶部，#1c1c0%，#3a3a 48%，#1c1c100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，#1c1c0%，#3a3a 48%，#1c1c100%）/*IE10+*/
背景：线性梯度（至底部，#1c1c0%，#3a3a 48%，#1c1c100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#1c1c1c'，endColorstr='#1c1c1c'，GradientType=0）；/*IE6-9*/
}
.手风琴头h2
{
颜色：白色；
字体大小：16px；
字体系列：世纪哥特式；
填充：9px；
浮动：左；
}
.手风琴头h2：悬停
{
颜色：#FF8000；
}
A.手风琴体
{
宽度：100%；
高度：0px；
溢出：隐藏；
背景：#ffffff；/*旧浏览器*/
/*IE9 SVG，需要将“过滤器”条件重写为“无”*/
背景：url（数据：数据：数据：图像/svg+xml；基本64，基本64，PD94BBWWWWWWBWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWBBWWWWWBWWWWWWWWBWWWWWWWWWWWWWWVVVVVVVVvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvUIPGOGICAGPHN0B3AGB2ZMC2V0psiWJSIGC3RVCC1JB2xVCJ0II2ZMZMZMIIGC3RVCC1VCGFJAXR5psiXII8+CIAGICA8RCRVCCBVZMZZZZZZZQ9IJ9SB3I9IINwU1ZTUIIH0B3BHY2L0ET0IMPGOGIDWGLUZYR3JLLBNQ+CIGPHJJGLY3QGED0IMCIGE0IMCIGD2L2KDG9IJJ9IJJKZZZL9IJZZZZL9MC2IZK9IJJJJZZZZZZL9IZZZZZL9M+的UIJJJJJJJJJJJJJJ0IZZZZZZZZZZZZZZZZZZZZZ；
背景：-莫兹线性梯度（顶部，#ffffff 0%，#E5 100%）；/*FF3.6+*/
背景：-webkit渐变（线性、左上、左下、颜色停止（0%、#ffffff）、颜色停止（100%、#e5））；/*铬、Safari4+*/
背景：-webkit线性梯度（顶部，#ffffff 0%，#E5 100%）；/*Chrome10+，Safari5.1+*/
背景：-o型线性梯度（顶部，#ffffff 0%，#E5 100%）；/*Opera 11.10+*/
背景：-ms线性梯度（顶部，#ffffff 0%，#E5 100%）；/*IE10+*/
背景：线性梯度（至底部，#ffffff 0%，#E5 100%）；/*W3C*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#ffffff'，endColorstr='#e5'，GradientType=0）；/*IE6-8*/
}
手风琴体
{
字体大小：14px；
字体系列：Arial；
颜色：303030；
填充物：5px；
文本对齐：左对齐；
线高：1.3em；
}
打开
{
浮动：对；
颜色：白色；
填充：9px；
}
.结束
{
浮动：对；
颜色：白色；
填充：9px；
显示：无；
}
.手风琴体h3
{
文本对齐：左对齐；
字体系列：Arial；
颜色：#212121；
字体大小：16px；
填充：3倍；
左边距：5px；
}
.手风琴体h4
{
文本对齐：左对齐；
字体系列：Arial；
颜色：303030；
字体大小：14px；
填充：3倍；
左边距：5px；
}

客户服务/PricingOpen+关闭-
McFarland Door&Millwork，LLCJuly 2014–2014年11月| Lakeview，或收到、定价和交付所有报价