javascript - 使用 jquery 在切换时添加和删除 css 图像类

Question

我试图在用户单击 artcile 的 h3 元素时切换菜单，这很像 Accordion ，但有点不同。

我无法实现的是，当调用元素的 slideToggle 函数时，图像既不显示也不改变。然而，slideToggle 工作正常，它只是我需要帮助的图像。

HTML:-

<div class="pages">
    <article class="collapsible expanded collapsed">
        <h3><?php echo $lang->xlate('presentation-b');?></h3>
    </article>

    <div class="content">
        <ul>
            <li>
                <?php echo $lang->xlate('presentation-c');?> </li>



            <li>
                <?php echo $lang->xlate('presentation-d');?> </li>



            <li>
                <?php echo $lang->xlate('presentation-e');?> </li>
        </ul>
    </div>
</div>

CSS

#paragraph .pages .collapsible {
  padding: 2px;
  cursor: pointer;
  font-weight: bold;
}
#paragraph .pages .collapsible .expanded  {background: url('../img/list.png') no-repeat left top;}
#paragraph .pages .collapsible .collapsed {background: url('../img/pagination.gif') no-repeat left top;}

jQuery:-

        $('.collapsible').click(function(){
        $coll = $(this);
        $content = $coll.next();
        $content.slideToggle(500, function () {
         //execute this after slideToggle is done
         //change text of header based on visibility of content div
                    if($(this).hasClass('expanded'))
                    {
                        $(this).toggleClass('collapsed expanded');
                    }
                    else
                    {
                        $(this).toggleClass('expanded collapsed');
                    } 
        });
    });

Answer 1

添加或删除类时不需要类指示符 "."。这意味着您不会为每个状态切换背景图像。

$(this).addClass('.collapsed').removeClass('.expanded');

所以你的代码应该是

if ($(this).hasClass('.expanded')) {
    $(this).addClass('collapsed').removeClass('expanded');
} else {
    $(this).addClass('expanded').removeClass('collapsed');
}