Question

我正在为我的网站上的移动设备编程菜单。当用户单击箭头向下图像时，子菜单出现，图像变为向上箭头。

但是，当用户点击向上箭头时，图像应该更改回箭头。

到目前为止我的脚本：

<!-- Hide show nav -->
<script>
    $(document).ready(function(){
        $(".show_hide_main_sub_menu").click(function () {
            $("#main_sub_menu").toggle();
            $(".show_hide_main_sub_menu").attr('src',"../_webdesign/images/main/arrow_up.png");
        });
    });
</script>
<!-- //Hide show nav -->

<a href="#"><img src="../_webdesign/images/main/arrow_down.png" alt="arrow_down.png" class="show_hide_main_sub_menu" /></a>

有人能指出我正确的方向吗？

Answer 1

请勿替换来源

可能的解决方案是不替换图像，而只是使用CSS旋转元素：return myList.stream() .flatMap(x -> expand(x).stream()) .collect(Collectors.toList());作为jQuery解决方案please see this post的参考。如果您使用css转换，如：transform: rotate(180deg);，您可以获得良好的平滑效果，而不会在更改源时获得令人讨厌的闪烁。为了获得最佳的用户体验，您可能还会删除png文件，而是使用svg象形图，因为它可以更好地缩放并且尺寸更小。

PURE CSS

值得注意的是，纯css可以轻松实现效果和用户交互。可以看到at this codepen example和互联网上的许多其他地方（只是搜索它）。将jQuery降低到最低限度始终是受欢迎的做法。拥有主要由CSS覆盖的UI图形功能也很有帮助。这样您就可以更好地优化页面。如果DOM结构和CSS设计得很好，你甚至可以实现更快的加载/渲染，使其在各种浏览器中更加一致，并摆脱与没有JS处理客户端或使用干扰浏览器插件或jQuery时的情况相关的问题脚本未在客户端上正确加载和初始化（即由于与服务器的通信不良）。

Answer 2

您可以尝试使用类分配img src，并根据类进行转换。

例如：

<a href="#" id="clickable"><div class="show_hide_main_sub_menu down_arrow"></div></a>

$(document).ready(function() {
    $("#clickable").click(function() {
        var target = $(this).children(".show_hide_main_sub_menu");
        if (target.hasClass("down_arrow")) {
            target.removeClass("down_arrow");
            target.addClass("up_arrow");
        } else if (target.hasClass("up_arrow")) {
            target.removeClass("up_arrow");
            target.addClass("down_arrow");
        }
    })
})

.down_arrow {
    background-image:url('https://openclipart.org/image/2400px/svg_to_png/154963/1313159889.png');
    background-size:contain;
    background-repeat:no-repeat;
    height:20px;
    width:20px;
}
.up_arrow {
    background-
    image:url('https://cdn.pixabay.com/photo/2013/07/13/09/50/arrow-156118_960_720.png');
    background-size:contain;
    background-repeat:no-repeat;
    height:20px;
    width:20px;
}

Check this fiddle

Answer 3

您可以检查src属性的当前值，并根据结果更改它（和alt属性）。

$(document).ready(function() {
  $(".show_hide_main_sub_menu").click(function() {
    $("#main_sub_menu").toggle();
    if ($(".show_hide_main_sub_menu").attr('src') === "../_webdesign/images/main/arrow_down.png") {
      $(".show_hide_main_sub_menu").attr('src', "../_webdesign/images/main/arrow_up.png").attr('alt', 'arrow_up.png');
    } else {
      $(".show_hide_main_sub_menu").attr('src', "../_webdesign/images/main/arrow_down.png").attr('alt', 'arrow_down.png');
    }
  });
});

Jquery切换图像，但记住最后一张图像

3 个答案: