jquery - jQuery手风琴 - 如何用图像替换活动链接？

Question

当您单击它时，有人知道如何用另一个图像替换活动链接（这是我的代码中的图像）吗？

http://jsfiddle.net/8bwre/1/

当您单击黄色卫生纸的图标时，我基本上希望将“黄色卫生纸”的图像替换为“黄色信封”。与其他图像相同！

有没有这样的解决办法？？

    (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>

Answer 1

一切皆有可能 ;）

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

1. 在您的 div.click 中有两张图片，一张带有 class="close" 另一个带有 class="open"
2. 使用 css 默认隐藏 img.open
3. 打开零件时使用 JS 隐藏 img.close 并显示 img.open

Answer 2

您要么必须隐藏卫生纸，要么替换它的源属性：

 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>

并调用 toggle() 函数，如下所示

$('.accordion > .click > a').click(function() {
    $(this).children('img').toggle();
    $(this).parent().next().slideToggle();
    return false;
});

Answer 3

通过应用以下代码，您可以实现您正在寻找的内容：

http://jsfiddle.net/8bwre/2/

(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);

然后在 CSS 中，您可以使用隐藏第二张图片display: none;