Question

我的手风琴有效，一次只能打开一张图像。箭头以向下开始，但如果单击它，图标将变为向上。我试图用图像制作，因为我不喜欢可能的图标。问题是我的JavaScript用于图标，但在尝试之后，我不知道如何将它用于图像。我尝试了两张我的照片。上翻和下翻。

我的jQuery

jQuery(document).ready(function () {
    $(".flip").click(function () {
        $(".panel").not($(this).next(".panel").slideToggle("slow")).slideUp("slow");
        if($("i",this).hasClass('fa-chevron-circle-down')){
            $(".fa-chevron-circle-up").removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
            $("i",this).removeClass("fa-chevron-circle-down").addClass("fa-chevron-circle-up");
        }
        else{
            $("i",this).removeClass("fa-chevron-circle-up").addClass("fa-chevron-circle-down");
        }
    });
});

和HTML

<div class="flip shadow-box col-xs-12 col-md-12 col-sm-12 arrow-icon-geschaeftsfelder">
    <i class="fa fa-chevron-circle-down"></i>
</div>

Answer 1

您可以使用javascript（用图片代码替换fa元素）来制作它，或者您可以使用纯css进行解决和覆盖：

  .fa.fa-chevron-circle-down {
      content: "";
      background: url(assets/img/down.png) center center no-repeat;
  }
  .fa.fa-chevron-circle-up {
      content: "";
      background: url(assets/img/up.png) center center no-repeat;
  }

小心图像的大小。 fa项的大小取决于字体大小。您可以在css中指定宽度和高度以避免出现问题。

注意：此解决方案无需编辑您的JavaScript代码。

如何用JavaScript更改图像？

1 个答案: