Tengo un listado de desplegables al cual le he puesto una imagen de una flecha, la cual debe cambiar de cuando está cerrada a cuando se despliega el desplegable. Cuando hago la modificación de la imagen de cerrada a abierta lo hace bien, pero cuando se cierra el desplegable, no vuelve a la imagen anterior y no sé por qué.
Mi código:
$('#acordeon_didesweb .contenido_acordeon').not('.menues.desplegado + .contenido_acordeon').hide();
$('#acordeon_didesweb .menues').click(function() {
$(this).find('.img-desplegado-open').attr('src', 'https://placehold.it/20x20/ff0000/');
if ($(this).hasClass('desplegado')) {
$(this).removeClass('desplegado');
$(this).next().slideUp();
} else {
$('#acordeon_didesweb .menues').removeClass('desplegado');
$(this).addClass('desplegado');
$('#acordeon_didesweb .contenido_acordeon').slideUp();
$(this).next().slideDown();
}
});
.menues {
font-family: iberia_text_bold;
background: #fff;
font-size: 18px;
color: #0090D0;
letter-spacing: -0.41px;
line-height: 25px;
border-bottom: 1px solid #333333;
cursor: pointer;
margin-right: 10px;
padding: 20px;
}
.tit-contenido {
font-family: iberia_text_regular;
font-size: 20px;
color: #4A4A4A;
letter-spacing: 0;
}
.contenido_acordeon {
background: #fff;
border-bottom: 1px solid #333333;
line-height: 1.6em;
padding: 20px;
}
.menues.desplegado,
.menues:hover {
background: #fff;
color: #4A4A4A;
}
.img-desplegado-open {
margin-right: 15px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" />
<div class="row">
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12">
<ul id="acordeon_didesweb">
<div class="menues"><img src="https://placehold.it/20x20" class="img-desplegado-open"> 2015</div>
<li class="contenido_acordeon">
<p class="tit-contenido">Airline of the Year 2015 / 2016</p>
<p>Bronze in Recognition of Exceptional Performance in all Aspects of Regional Airline Operations ERA (European Regions Airline Association), Berlín</p>
</li>
<div class="menues"><img src="https://placehold.it/20x20" class="img-desplegado-open"> 2014</div>
<li class="contenido_acordeon">
<p class="tit-contenido">Airline of the Year 2015 / 2016</p>
<p>Bronze in Recognition of Exceptional Performance in all Aspects of Regional Airline Operations ERA (European Regions Airline Association), Berlín</p>
</li>
<div class="menues"><img src="https://placehold.it/20x20" class="img-desplegado-open"> 2013</div>
<li class="contenido_acordeon">
<p class="tit-contenido">Airline of the Year 2015 / 2016</p>
<p>Bronze in Recognition of Exceptional Performance in all Aspects of Regional Airline Operations ERA (European Regions https://es.stackoverflow.com/posts/223910/edit#Airline Association), Berlín</p>
</li>
</ul>
</div>
</div>
Para cambiar la imagen he metido en el JQuery esta línea de código
$(this).find('.img-desplegado-open').attr('src', './img/iconos/ic-li-open.svg');
pero para volver a modificarla cuando se cierra dicho desplegable he intentado insertar dicha línea de código en el else
de la función de JQuery modificando la imagen y no me funciona.
¿Cómo podría hacer para modificar la imagen cuando se abre y se cierra el desplegable?