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

通过应用以下代码，可以实现所需的内容：

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;隐藏第二个图像

Answer 2

一切皆有可能;)

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

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

Answer 3

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

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