使用jquery在toggle上添加和删除css图像类

Add and Remove a css image class on toggle using jquery

本文关键字：删除 css 图像 添加 jquery toggle 使用      更新时间：2023-11-03

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

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

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

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

所以你的代码应该是

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

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

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