单击时将图像淹没为另一个图像然后恢复为原始图像

Question

嘿堆栈溢出的人！

我有一个下拉菜单按钮，我想在点击时从加号变为减号。

我可以将图片更改为减号，但无法将其更改回加号。

如果有人可以提供帮助那就太棒了，我使用的是jQuery，这是我目前的进展。

      <div class="plus-button"></div>

$('.plus-button').on('click', function(){
    $('.plus-button').removeClass('plus-button');
    $(this).addClass('minus-button');
});

Answer 1

您可以将多个类名传递给toggleClass()。这可能是最简单的方法，因为这意味着您不必跟踪元素的当前状态。

＆＃13;

＆＃13;

$('.my-button').on('click', function(){
    $(this).toggleClass('plus-button minus-button');
});

＆＃13;

.plus-button {
  color: red;
}

.minus-button {
  color: green;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="my-button plus-button">BUTTON</div>

＆＃13;

＆＃13;

＆＃13;