Javascript 查询类切换以更改背景图像不工作

好的，我对jQuery了解得足够多，可以完成我的一些任务（显然除了这个）

情况：
我有一个手风琴菜单，菜单的左边有加号和减号的图像。我希望它们在子表可见时更改

我的代码中有一些bug不允许这种情况发生。单击其中一个选项时，它将变为负数；单击另一个选项时，它将变为加数

问题是： 展开区域后，如果再次单击“可见”选项以折叠元素，则accordion类不会更改

这里是一个JSFIDLE演示

但不要使用它。

你的文档结构非常糟糕。您的表只有一个单元格，标题和toggleable部分之间的关联仅通过邻接。您最好更改标记，使每个手风琴都被一个

/

包围

此外，您已经过度使用

id

s，您的CSS应该全部从文档中删除

align=“center”

不应使用。最后，为什么要为

expand

ed和

collapse

d创建一个类来搞乱事情呢？这两个类是互斥的，所以只需使用一个类

---

:

HTML jQuery

---

该表用于加载到其中的一些ajax内容。外部样式表很好，内联样式也可以，混合两者是非常不好的。是否需要以前打开的框来隐藏？这些表的存在是为了在加载文档时可以显示三个选项，而其他所有选项都将被隐藏。当用户单击这三个选项中的一个时，嵌入的div区域将在表内可见。@peledies:但是为什么要使用

表

？

<div class='accordian'>
    <h3><span class='icon'></span>Option 1</h3>
    <div>
        the box should be black now, if you click this option
        again it should turn white
    </div>
</div>
<div class='accordian' id='weekly'>
    <h3><span class='icon'></span>Option 2</h3>
    <div>
        the box should be black now, if you click this option
        again it should turn white
    </div>
</div>

.accordian h3 {
    background-color:#689937;
    color:#fff;
    height:30px;
}
.accordian .icon {
    background-color:#fff;
    background-size:25px;
    background-repeat: no-repeat;
    height:25px;
    width:25px;
    padding-left:5px;
    float:left;
}
.accordian.collapsed .icon {
    background-color:#000;
}

$('.accordian').each(function() {
    var accordian = $(this);
    var header = accordian.find('h3');
    var content = accordian.find('div');

    header.click(function() {
        content.slideToggle('medium');
        accordian.toggleClass('collapsed');
    });

    content.hide();
    accordian.addClass('collapsed');
});