Jquery 手风琴展开折叠图标问题

我正在制作一个手风琴，包括几个孩子，点击后会显示一个打开/关闭图标

我遇到的问题是图标。一次展开和折叠一个图标是可以的，但是当你打开多个项目时，图标开始表现出奇怪的行为，当它们应该是正的时候，就会显示负数

我已经尝试过每一种和if-else语句，但现在运气还不错

我还提供了一个链接到我的

$（文档）.ready（函数（）{
$（'.pub accordion content'）.hide（）；
$（'pub accordion'）。查找（'pub accordion toggle'）。单击（函数（）{
var$this=$（this）；
//切换图标
$this.toggleClass（“打开”）；
//展开或折叠此面板
$this.next（）.slideToggle（'fast'））
//隐藏其他面板
$（“.pub accordion content”）.not（$this.next（））.slideUp（'fast'）；
});
});
#酒吧手风琴{
填充：24px；
}
#酒吧手风琴h4：第一个孩子{
边框顶部：1px实心#ccc；
}
#酒吧手风琴h4{
边框底部：1px实心#ccc；
颜色：#00539f；
字号：1.6em；
保证金：0；
填充：16px 0 16px 33px；
光标：指针；
}
#酒吧手风琴，关门{
背景：url(http://www.dcholloway.co.uk/codepen/primary-collapse-icon.png)无重复0 13px；
}
#酒吧手风琴，开门{
背景：url(http://www.dcholloway.co.uk/codepen/primary-expand-icon.png)无重复0 13px；
}

男孩尺码指南
Lorem ipsum dolor坐在amet mauris eu turpis

女孩尺码指南
Lorem ipsum dolor坐在amet mauris eu turpis

男孩+合身尺码指南
利希斯尼布十字勋章拉奥里特万岁

女孩+合身尺码指南
利希斯尼布十字勋章拉奥里特万岁

只需在
单击事件的开头添加以下行即可

$(".pub-accordion-toggle").removeClass('open');

所以看起来

$('#pub-accordion').find('.pub-accordion-toggle').click(function(){
    $(".pub-accordion-toggle").removeClass('open');//this here
    var $this = $(this);

    //Toggle icon
    $this.toggleClass("open");

    //Expand or collapse this panel
    $this.next().slideToggle('fast')

    //Hide the other panels
    $(".pub-accordion-content").not($this.next()).slideUp('fast');
});

您只需从
.pub accordio toggle
元素中删除任何
open
类。它就是这样做的

只需在
单击事件的开头添加下面的一行

$(".pub-accordion-toggle").removeClass('open');

所以看起来

$('#pub-accordion').find('.pub-accordion-toggle').click(function(){
    $(".pub-accordion-toggle").removeClass('open');//this here
    var $this = $(this);

    //Toggle icon
    $this.toggleClass("open");

    //Expand or collapse this panel
    $this.next().slideToggle('fast')

    //Hide the other panels
    $(".pub-accordion-content").not($this.next()).slideUp('fast');
});

您只需从
.pub accordio toggle
元素中删除任何
open
类。它就是这样做的

添加
$（'h4'）.removeClass（“打开”）.addClass（“关闭”）点击事件是一种解决方案。这将删除所有
的类
open
，并添加
close

它也适用于
$（.pub accordio toggle）

编辑：我做了一些更正，因为我注意到在单击打开的元素时出现了问题


$（文档）.ready（函数（）{
$（'.pub accordion content'）.hide（）；
$（'pub accordion'）。查找（'pub accordion toggle'）。单击（函数（）{
var$this=$（this）；
var toOpen=$this.hasClass（“打开”）；
$（'h4'）.removeClass（“打开”）.addClass（“关闭”）；
//切换图标
如果（！toOpen）{
$this.removeClass（“关闭”）.addClass（“打开”）；
}
//展开或折叠此面板
$this.next（）.slideToggle（'fast'））
//隐藏其他面板
$（“.pub accordion content”）.not（$this.next（））.slideUp（'fast'）；
});
});
#酒吧手风琴{
填充：24px；
}
#酒吧手风琴h4：第一个孩子{
边框顶部：1px实心#ccc；
}
#酒吧手风琴h4{
边框底部：1px实心#ccc；
颜色：#00539f；
字号：1.6em；
保证金：0；
填充：16px 0 16px 33px；
光标：指针；
}
#酒吧手风琴，关门{
背景：url(http://www.dcholloway.co.uk/codepen/primary-collapse-icon.png)无重复0 13px；
}
#酒吧手风琴，开门{
背景：url(http://www.dcholloway.co.uk/codepen/primary-expand-icon.png)无重复0 13px；
}

男孩尺码指南
Lorem ipsum dolor坐在amet mauris eu turpis

女孩尺码指南
Lorem ipsum dolor坐在amet mauris eu turpis

男孩+合身尺码指南
利希斯尼布十字勋章拉奥里特万岁

女孩+合身尺码指南
利希斯尼布十字勋章拉奥里特万岁

添加
$（'h4'）.removeClass（“打开”）.addClass（“关闭”）点击事件是一种解决方案。这将删除所有
的类
open
，并添加
close

它也适用于
$（.pub accordio toggle）

编辑：我做了一些更正，因为我注意到在单击打开的元素时出现了问题


$（文档）.ready（函数（）{
$（'.pub accordion content'）.hide（）；
$（'pub accordion'）。查找（'pub accordion toggle'）。单击（函数（）{
var$this=$（this）；
var toOpen=$this.hasClass（“打开”）；
$（'h4'）.removeClass（“打开”）.addClass（“关闭”）；
//切换图标
如果（！toOpen）{
$this.removeClass（“关闭”）.addClass（“打开”）；
}
//展开或折叠此面板
$this.next（）.slideToggle（'fast'））
//隐藏其他面板
$（“.pub accordion content”）.not（$this.next（））.slideUp（'fast'）；
});
});
#酒吧手风琴{
填充：24px；
}
#酒吧手风琴h4：第一个孩子{
边框顶部：1px实心#ccc；
}
#酒吧手风琴h4{
边框底部：1px实心#ccc；
颜色：#00539f；
字号：1.6em；
保证金：0；
填充：16px 0 16px 33px；
光标：指针；
}
#酒吧手风琴，关门{
背景：url(http://www.dcholloway.co.uk/codepen/primary-collapse-icon.png)无重复0 13px；
}
#酒吧会计