单击时更改基础图标

Question

我想弄清楚如何在单击时更改按钮的图标。

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

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

你们知道怎么做吗？

Answer 1

在你的情况下，最好使用 <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");
   });

});

Answer 2

也许你只需要旋转你的图标而不是用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');
});

单击时更改基础图标

Change foundation icon when clicked

css

zurb-foundation