单击时将图像替换为另一个图像，然后恢复为原始图像

Question

嘿堆栈溢出的人！

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

我可以让图像变成负号，但无法让它变回正号。

如果有人能提供帮助那就太好了，我正在使用 jQuery，这是我目前的进度。

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

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

Answer 1

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

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

.plus-button {
  color: red;
}

.minus-button {
  color: green;
}

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

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

单击时将图像替换为另一个图像，然后恢复为原始图像

Swamping an image for another on click then revert back to the original

jquery

swap

image

menu

button