jQuery accordion-如何用图像替换活动链接？

有人知道当你点击它时如何用另一个图像替换活动链接（在我的代码中是一个图像）吗

我基本上希望当你点击黄色卫生纸的图标时，“黄色卫生纸”的图像被替换为“黄色信封”。和其他图像一样

有这样的解决办法吗

    (function($) {

    var allPanels = $('.accordion > .day').hide();

    $('.accordion > .click > a').click(function() {
        allPanels.slideUp();

        if($(this).parent().next().is(':hidden'))
        {
            $(this).parent().next().slideDown();
        }

        return false;
    });

})(jQuery);

以及HTML：

<div class="accordion">

  <div class="click">
    <a href=""><img src="http://designmodo.github.io/Flat-UI/images/icons/svg/toilet-paper.svg"></a>
  </div>

  <div class="day">
    <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/mail.svg">
    <p>Tomatillo sweet pepper carrot salad cress arugula. Kombu cabbage sorrel celery soko plantain tigernut caulie parsnip tomatillo spinach avocado. Spring onion water chestnut parsnip water spinach cress napa cabbage fennel beetroot.</p>
  </div>


  <div class="click">
    <a href=""><img src="http://designmodo.github.io/Flat-UI/images/icons/svg/retina.svg"></a>
  </div>

  <div class="day">
      <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/clocks.svg"><p>Kohlrabi sea lettuce wattle seed mung bean asparagus cucumber chard salsify kombu beetroot radicchio black-eyed pea. Scallion salsify beetroot tigernut prairie turnip artichoke daikon celery turnip greens. Horseradish aubergine carrot gumbo maize collard greens potato caulie lentil arugula salsify rock melon fava bean celery.</p>
  </div>

</div>

汤玛蒂洛甜椒胡萝卜沙拉水芹芝麻菜。科姆布卷心菜、酸菜、芹菜、大蕉、虎杖、防风草、番茄、菠菜、鳄梨。葱、菱角、防风草、菠菜、水芹、甘蓝、茴香、甜菜根

大头菜海莴苣荆棘籽绿豆芦笋黄瓜甜菜根黑眼豌豆。大葱甜菜根虎耳草大萝卜朝鲜蓟大康芹菜萝卜绿叶。辣根、茄子、胡萝卜、秋葵、玉米、羽衣甘蓝、绿叶、马铃薯茎、小扁豆、芝麻菜、盐性甜瓜、蚕豆、芹菜

一切皆有可能；）

一种可能的解决方案（由您自己编写）：

在您的div中单击两个图像，一个带有class=“closed”，另一个带有class=“open”

使用css默认隐藏img.open

打开零件时，使用JS隐藏img.closed并显示img.open

---

您必须隐藏卫生纸或替换其源属性：

 if($(this).parent().next().is(':hidden')) {
        $(this).hide();
        $(this).parent().next().slideDown();
    }

或者将两个图像放在同一个位置

<a href="">
    <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/toilet-paper.svg">
    <img src="http://designmodo.github.io/Flat-UI/images/icons/svg/mail.svg" style="display: none;">
 </a>

---

通过应用以下代码，您可以实现所需的功能：

---

然后在CSS中，您可以使用

display:none隐藏第二个图像
然而，我刚刚注意到这有一个问题：1。点击“便笺”，打开“信封”，而“便笺”被CSS隐藏。2.现在我点击绿色的“滴答”按钮，它会显示“时钟”3。当我执行这两个步骤时，“卫生纸”突然被“信封”所取代：(
$('.accordion > .click > a').click(function() {
    $(this).children('img').toggle();
    $(this).parent().next().slideToggle();
    return false;
});

(function($) {

    var allPanels = $('.accordion > .day').hide();

    $('.accordion > .click > a').click(function() {
        allPanels.slideUp();

        /******************/
        var currentSrc = $(this).children('img').attr('src');

        var newSrc = $(this).parent().next().children('img').attr('src');

        $(this).children('img').attr('src', newSrc);

        $(this).parent().next().children('img').attr('src', currentSrc);
        /******************/


        if($(this).parent().next().is(':hidden'))
        {
            $(this).parent().next().slideDown();
        }

        return false;
    });

})(jQuery);