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

在小提琴中有两个图像100x50和100x100，当我打开或关闭（背景颜色更改）时也想更改图像。

Answer 1

我为两个图像都添加了ID。在切换功能上，我还要切换两个图像。

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

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;
}

.click1 {
  display: none;
}

dl.accordion dt.open {
  background-color: #9ED6E2;
  color: white;
}

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" id="open-image" class="size">
      <img src="https://via.placeholder.com/100x100"id="close-image" class="click1 size">
    </span>
		<span class="text">マンションを購入しようとした時に、何から始めたらよいのでしょうか?</span>
		<span class="image2"><img src="img/open-blue-big.png" class="size-btn"></span>
	</dt>
</dl>

<img src="https://via.placeholder.com/100x50">

Answer 2

您只能使用一张图片并更改功能src中的$(".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')=='https://i.stack.imgur.com/Oh6WR.png')
           $(".open .size").attr('src','https://via.placeholder.com/100x50');
        else
           $(".open .size").attr('src','https://i.stack.imgur.com/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>

切换开/关时图像变化

更新

2 个答案: