查询类切换以更改跨度背景图像不起作用

Question

好的，我对 jQuery 的了解足以完成我的一些任务（当然除了这个）。

情况：
我有一个手风琴菜单，其中包含显示在菜单左侧的正负图像。我希望它们在子表可见时进行更改。

我的代码中存在一些不允许这种情况发生的错误。当您单击其中一个选项时，它将变为减号，当您单击另一个选项时，它将变为加号。

问题： 展开区域后，如果再次单击可见选项折叠元素，手风琴类将不会改变。

这是一个 jsfiddle 演示 http://jsfiddle.net/mKUNs/

Answer 1

Here's a fixed version。 但不要使用它。

您的文档结构非常糟糕。您的表格只有一个单元格，并且标题和可切换部分之间的关​​联仅靠邻接关系。你最好改变你的标记，让每个手风琴都被<div>/<section>包围。

另外，你已经用完了ids，你的CSS应该全部从文档中删除。 align="center" 应该不被使用。最后，为什么要为expanded 和collapsed 开设课程来搞混事情呢？两者互斥，所以只用一个类！

---

This is how you should do it:

HTML

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

CSS：

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

jQuery

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