使用jQuery在切换时添加和删除css图像类

Question

当用户单击artcile的h3元素时，我试图切换菜单，就像手风琴一样，但有所不同。

我无法实现的是，在调用元素的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');
}

Answer 2

删除. 在添加和删除类的类名之前。

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

您也可以使用toggleClass()在类之间进行切换。

$(this).toggleClass('collapsed expanded');

喜欢 ：

$('.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
        $(this).toggleClass('collapsed expanded');
    });
});