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

添加或删除类时，您不需要类指示符fetch('data.json') // nope。这意味着您不会切换每个州的背景图像。

"."

所以你的代码应该是

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

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

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

2 个答案: