Change of icons in drop-down list

Question

Change of icons in drop-down list

Navigation

#1 by (1 votes)

1

I have a list of dropouts to which I have placed an image of an arrow, which must change from when it is closed to when the drop-down is displayed. When I do the modification of the image from closed to open it does it well, but when the drop-down is closed, it does not return to the previous image and I do not know why.

My code:

$('#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>

To change the image I put this line of code in the JQuery

$(this).find('.img-desplegado-open').attr('src', './img/iconos/ic-li-open.svg');

but to change it again when I close that drop-down I tried to insert this line of code in the else of the JQuery function modifying the image and it does not work for me.

How can I change the image when the drop-down is opened and closed?

javascript jquery html5 html css

asked by derek 17.12.2018 в 21:00

source

1 answer

Delete duplicate php array [duplicate] missing 1 required positional argument - python

score 1 · Accepted Answer

You almost have it done: the problem when adding the jQuery code that you indicate in the else is that you would be undoing what you have done before outside the if..else , so the image may look weird (the open icon it will be seen when opening and closing will be shown when closing).

The only thing left for you to do is move the image changes directly into the if..else instead of having them out: within if the image for when the pull-down is closed, and within else the image for when the drop-down is open.

With that simple change it works well:

$('#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>