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

query class toggle to change span background image not working

本文关键字：背景 图像 不起作用 查询      更新时间：2023-09-26

好了，我对jQuery的了解足以让我完成一些任务(显然除了这个任务)。

这句话的语境是:
我有一个手风琴菜单，有加减图像显示在菜单的左侧。我希望它们在子表可见时改变。

我的代码中有一些错误，不允许这种情况发生。当你点击其中一个选项时，它会变成减号，当你点击另一个选项时，它会变成加号。

问题:当一个区域被展开后，如果你再次点击visible选项来折叠该元素，accordion类也不会改变。

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

这是一个固定的版本。

你的文档结构很糟糕。您的表只有一个单元格，并且标题和可切换部分之间仅通过邻接关系进行关联。您最好更改您的标记，以便每个accordian都被<div>/<section>包围。

另外，你过度使用id s，你的CSS应该全部从文档中取出。align="center"应该而不是。最后，为什么要把expand ed和collapse d的课程搞得一团糟呢?这两个是互斥的，所以只使用一个类!

你应该这样做:

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');
});
相关文章：