Togliere una classe css

**Sonikag** · 12-05-2017, 16:41

Ho questa funzione js:

codice:

$(document).ready(function(){
$('.container').hide();   
$( "h2.trigger" ).click(function() {  
    $(this).next().slideToggle(500);
    $(this).addClass("active"); 
}
);
});

Al click dei miei <h2 class='trigger'>titolo</h2> si apre il mio <div class='container'>bla bla</div> e al mio titolo viene aggiunta la classe active.

Se riclicco sul titolo il mio div viene nascosto, ma non riesco ad eliminare la classe con

codice:

$(this).removeClass("active");

probabilmente sbaglio la sintassi!

**KillerWorm** · 12-05-2017, 17:04

Dovresti usare un toggle anche per la classe. Puoi utilizzare il metodo toggleClass() di jQuery.
Una cosa del genere:

codice:

$( "h2.trigger" ).click(function() {  
    $(this).toggleClass("active")
    .next().slideToggle(500);
}

**Sonikag** · 12-05-2017, 18:05

Non mi funziona proprio!
Tu suggerivi di sostituire totalmente la mia funzione con la tua?
In quel modo di defaulto ho tutto aperto e senza la classe active.
Posto tutto il codice per chiarezza!

js

codice:

<script>

$(document).ready(function(){
$('.container').hide();   
$( "h2.trigger" ).click(function() {  
    $(this).next().slideToggle(500);
    $(this).addClass("active"); 
}
);
});

</script>

Mentre nel html

codice HTML:

<h2 class='trigger'><a href='#'>primo</a></h2>
<div class='container'>contenitore1</div>
<h2 class='trigger'><a href='#'>due</a></h2>
<div class='container'>contenitore2</div>
<h2 class='trigger'><a href='#'>tre</a></h2>
<div class='container'>contenitore3</div>

In questo contesto:
Cliccando su un h2 appare il div e all'h2 viene aggiunta la classe active
Ricliccando su h2 scompare il div
---
Quello che vorrei implementare è che mentre viene nascosto il div eliminare la classe active sull'h2
---
Ri-grazie

Grazie
Ciao

**KillerWorm** · 12-05-2017, 21:31

Tu suggerivi di sostituire totalmente la mia funzione con la tua?

Non tutto lo script ma solo quella parte che riguarda il click. Chiaramente $('.container').hide(); dovrai lasciarlo.
Forse non ti funziona perché sullo script che ho postato manca la chiusura della parentesi tonda; sul tuo l'hai riportata in una riga a capo. O forse potrebbe esserci qualche altro problema.

Ad ogni modo ti posto un esempio completo e funzionante da copiaincollare così com'è:

codice:

<!DOCTYPE HTML>
<html>
  <head>
    <title>Esempio</title>
    <meta charset="utf-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        $('.container').hide();   
        $( "h2.trigger" ).click(function() {  
          $(this).toggleClass("active")
          .next().slideToggle(500);
        });
      });
    </script>
    <style type="text/css">
      .active{
        background: yellow;
      }
    </style>
  </head>
  <body>
    <h2 class='trigger'><a href='#'>primo</a></h2>
    <div class='container'>contenitore1</div>
    <h2 class='trigger'><a href='#'>due</a></h2>
    <div class='container'>contenitore2</div>
    <h2 class='trigger'><a href='#'>tre</a></h2>
    <div class='container'>contenitore3</div>
  </body>
</html>

Giusto per verificare il funzionamento, ho impostato uno sfondo giallo per la classe .active.

**Sonikag** · 15-05-2017, 09:25

Funziona perfettamente grazie!
Però leggendo il codice non capisco come "elimina" la classe active quando torno a cliccare!

**KillerWorm** · 15-05-2017, 11:28

Funziona perfettamente grazie!

Non c'è di che

Però leggendo il codice non capisco come "elimina" la classe active quando torno a cliccare!

Esattamente col metodo toggleClass(), il cui principio è lo stesso di slideToggle(), cioè ad ogni click avviene un "toggle" (in sostanza viene commutato un dato valore).

Discussione: Togliere una classe css

Strumenti discussione

Ricerca discussione

Visualizza

Togliere una classe css

Tag per questa discussione

Permessi di invio