4

Tenho um script que faz o toggle no icon, intercalando-se quando o elemento é clicado, minha intenção é quando o segundo ou os demais icons fossem clicados, os elementos permanecessem com a classe glyphicon-chevron-down.

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
</a>

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
</a>

<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
    <i class="taskIcon glyphicon glyphicon-chevron-down"></i>
</a>

$(".taskIcon").on("click", function() {
    $(this).toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
});
2
  • O código que você colocou aí só altera o elemento clicado. Commented 7/11/2017 às 17:26
  • se clicar no primeiro icon, uma unica vez e em seguida clicar no segundo icon, a classe toggleclass que coloca a class glyphicon-chevron-up, permanece no elemento, queria manter a classe glyphicon-chevron-down para todos apos o toggle. Commented 7/11/2017 às 17:31

2 Respostas 2

4

Você pode utilizar o .siblings para obter os elementos adjacentes e alterar a classe deles.

$(".taskIcon").on("click", function() {
  var $this = $(this);
  $this.toggleClass("glyphicon-chevron-down").toggleClass("glyphicon-chevron-up");
  var context = $this.parent().siblings(); // Obtem os links adjacentes
  $(".taskIcon", context).removeClass("glyphicon-chevron-up").addClass("glyphicon-chevron-down");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1"><i class="taskIcon glyphicon glyphicon-chevron-down"></i></a>

2
  • 1
    +1 por lembrar do siblings e pelo exemplo executável. Commented 7/11/2017 às 17:39
  • neste caso onde teriamos icon separados por divs <div><i class=taskIcon></i></div> <div><i class=taskIcon></i></div> usariamos siblings tambem Commented 7/11/2017 às 17:55
1

Se entendi bem, você deseja que, ao clicar em um ícone:

  • Aquele ícone tenha sua classe modificada conforme o código atual, mas que além disso...
  • ... todos os demais ícones assumam uma classe específica.

Você pode incluir mais algumas instruções no seu código, para alterar todo mundo que pertence a determinada classe. Assim:

$(".taskIcon").on("click", function() {
    let iconeClicado = $(this),
        outrosIcones = $(".taskIcon").not(iconeClicado);

    outrosIcones
        .removeClass("glyphicon-chevron-up")
        .addClass("glyphicon-chevron-down");

    iconeClicado
        .toggleClass("glyphicon-chevron-down")
        .toggleClass("glyphicon-chevron-up");
});

Isso irá remover a classe de seta pra cima de todos os ícones exceto o clicado. Da mesma forma, dará a classe de seta para baixo para todos os ícones exceto o clicado. Já o ícone clicado mantém seu comportamento.

1
  • sua resposta esta excelente também parabéns, como estou usando muito clones de divs, códigos como o seu irei utilizar bastante... Commented 7/11/2017 às 18:02

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .