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

Question

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

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

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

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

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

Answer 1

这是一个固定版本。 但不要使用它。

您的文档结构非常糟糕。您的表格只有一个单元格，标题和可切换部分之间的关​​联仅通过相邻关系进行。您最好更改标记，以便每个手风琴都被

/

包围。

此外，您已经不再使用 id，并且您的 CSS 都应该从文档中删除。不应使用align="center"。最后，为什么要为 expanded 和 collapsed 建立一个类来搞乱事情呢？两者是互斥的，所以只使用一个类！

---

你应该这样做：

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