jquery - 打开/关闭时图像变化

Question

我的开关正在打开一个菜单，在该菜单中我有两张图片。我想更改 2 个图像之间的切换，但无法正确执行。

Jquery

$(function(){
   $(".accordion dt").click(function(){
        $(this).next("dd").slideToggle();
        $(this).next("dd").siblings("dd").slideUp();
        $(this).toggleClass("open");    
        $(this).siblings("dt").removeClass("open");
    });          
});

HTML

<dl class="accordion">
<dt>
    <span class="image"><img src="img/question-off.png" class="size click-former"><img src="img/question-on.png" class="click1 size"></span>
    <span class="text">Some Text Here</span>
    <span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
</dt>
</dl>

在 Css 中我隐藏了 img 上的开关。

.click1 {
    display: none;
}

但有点困惑如何改变它，打开或关闭。

更新

JSfiddle

当我打开或关闭(背景颜色更改)时， fiddle 中有两个图像 100x50 和 100x100 也想更改图像。

Answer 1

您只能使用一个图像并在函数$(".size").attr('src','https://via.placeholder.com/100x50'):

See fiddle:

    $(function(){
     
    	$(".accordion dt").click(function(){
    		$(this).next("dd").slideToggle();
    		$(this).next("dd").siblings("dd").slideUp();
    		$(this).toggleClass("open"); 
    		$(this).siblings("dt").removeClass("open");
        $('.accordion > dt *:not(.open) .size').attr('src','https://via.placeholder.com/100x50');
        if($('.open .size').attr('src')=='/image/Oh6WR.png')
           $(".open .size").attr('src','https://via.placeholder.com/100x50');
        else
           $(".open .size").attr('src','/image/Oh6WR.png');
           
    			});

    		
    		});

  dd {
    	margin: 0;
    }

    dl.accordion {
    	font-family: Helvetica Neue; 
    	width:100%;
    	font-size:16px;
    }

    dl.accordion dt {
        border-bottom:1px solid #9ED6E2; 
        height:auto; 
        text-indent:10px; 
        line-height:20px; 
        color:#333; 
        font-weight:medium; 
        cursor:pointer;
    }



    dl.accordion dt.open {
        background-color: #9ED6E2;
        color: white;
    }

    img{
      width:100px;
      height:100px;
    }

    dl.accordion dd { 
    	background:#FFF; 
    	padding:10px;
    	line-height:1.5; 
    	display:none;
    }

    dl.accordion dd.text {
    	padding-left: 10px;
    }

    dt, dd {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    dt > span {
    	padding-top: 10px;
        display: block;
    }

    dt > span.text { 
    	flex-grow: 1;

    }

    dt > span.image2 {
    	padding-right: 10px;
    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <dl class="accordion">
    <dt>
     <span class="image">
      <img src="https://via.placeholder.com/100x50" class="size">
     </span>
     <span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
    <span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
    </dt>
    <dt>
     <span class="image">
      <img src="https://via.placeholder.com/100x50" class="size">
     </span>
     <span class="text">second dt only to example</span>
    <span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
    </dt>
    </dl>