Question

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

情况：
我有一个手风琴菜单，其中有正负图像显示在菜单的左侧。我想让他们在子表可见时更改。

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

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

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

Answer 1

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

您的文档结构非常糟糕。您只有一个单元格的表格，标题和可切换部分之间的关联只能通过邻接来实现。您最好更改标记，以便每个手风琴都被<div> / <section>包围。

此外，您已经过度使用id，并且您的CSS应该全部从文档中删除。 align="center"应不使用。最后，为什么要通过expand ed和collapse d的课程来混淆事情？这两者是相互排斥的，所以只需使用一个类！

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

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

1 个答案:

HTML

CSS：

的jQuery