1

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?

1 respuesta 1

1

Casi lo tienes hecho: el problema al añadir el código jQuery que indicas en el else es que estarías deshaciendo lo que has hecho antes fuera del if..else, por lo que la imagen puede verse rara (el icono de abrir se verá al abrir y el de cerrar se mostrará al cerrar).

Lo único que te quedaba por hacer es mover los cambios de imágenes directamente dentro del if..else en lugar de tenerlos fuera: dentro del if la imagen para cuando el desplegable está cerrado, y dentro del else la imagen para cuando el desplegable está abierto.

Con ese simple cambio ya funciona bien:

$('#acordeon_didesweb .contenido_acordeon').not('.menues.desplegado + .contenido_acordeon').hide();
$('#acordeon_didesweb .menues').click(function() {
  // desactivamos todas las imagenes que esten abiertas (si alguna)
  $(this).closest("ul").find('.img-desplegado-open').attr('src', 'https://placehold.it/20x20');
  if ($(this).hasClass('desplegado')) {
    $(this).removeClass('desplegado');
    $(this).next().slideUp();
  } else {
    // ponemos el icono activo solo al que se esta abriendo ahora mismo
    $(this).find('.img-desplegado-open').attr('src', 'https://placehold.it/20x20/ff0000/');
    $('#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>

6
  • Ok, ya me funcionó, puede que antes que lo puse dentro lo puse mal y no me funcionó y al hacer algunos cambios lo puse fuera y se veia bien la imagen pero no me cambiaba al desplegar y cerrar los desplegables. muchas gracias
    – derek
    Commented el 17 dic. 2018 a las 21:21
  • Una cosa que me acabo de dar cuenta, ahora que lo estaba probando, es que cuando despliego uno me cambia el icono, pero al desplegar el siguiente el que estaba abierto se cierra correctamente pero no cambia el icono de abierto a cerrado, esto cómo se arreglaría?
    – derek
    Commented el 17 dic. 2018 a las 21:26
  • Deja que lo mire
    – Alvaro Montoro
    Commented el 17 dic. 2018 a las 21:28
  • Ok, muchas gracias
    – derek
    Commented el 17 dic. 2018 a las 21:33
  • 1
    Gacias, lo acabo de modificar y me funciona correctamente
    – derek
    Commented el 17 dic. 2018 a las 21:43

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.