单击时更改基础图标

Question

我正在试图弄清楚如何在点击时更改按钮的图标。

<div class="row">
    <a class="slideout-button"><i class="general foundicon-left-arrow"></i
    </a>
</div>

我想在滑块打开时更改为“foundicon-right-arrow”。

你知道怎么样？

Answer 1

也许你只需要旋转你的图标而不是用css rotate替换他：

 .slideout-button.open i:before{
  -webkit-transform: rotate(180deg);
  -moz-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  -o-transform: rotate(180deg);
  transform: rotate(180deg);
}

和jQuery代码：

$(".slideout-button").on('click', function(){
      $(this).toggleClass('open');
});

Answer 2

在您的情况下，最好使用<button>代替<a>。

<button class="slideout-button"><i class="general foundicon-left-arrow"></i
</button>

您可以像这样使用jquery：

$(document).ready(function(){
   $(".slideout-button").click(function(){
      $(".slideout-button i").removeClass("foundicon-left-arrow").addClass("foundicon-right-arrow");
   });

});