bascule Jquery ne fonctionne pas

J'ai un problème avec jquery toggle, il ne bascule pas le div actuel, mais à la place le div suivant du courant, quand j'essaie de changer la classe de la div toggle ça ne marche pas du tout. Quelqu'un peut-il m'aider s'il-vous-plaît ?
P.S: Je suis en train de basculer le bloc SITES, j'ai enveloppé son contenu (arrière-plan: jaune) dans la classe = "clsDashRegion_sitesBloc", quand je mets cette classe dans mon JS ça ne marche pas.bascule Jquery ne fonctionne pas

Voici mon code

(function zipContentBloc($) { 
 
\t \t $('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function() { 
 
\t \t \t // Toggle the panel next to the item that was clicked 
 
\t \t \t $(this).toggleClass('clsDashRegion_catgBloc--active').next().toggle(); 
 
\t \t }); 
 
\t })(jQuery);

/* Plus and Minus Signs */ 
 
.clsDashRegion_zipIndicator { 
 
\t position: absolute; 
 
\t top: 6%; 
 
    right: 0.5rem; 
 
\t transform: translateY(-50%); 
 
\t font-size: 1.8rem; 
 
} 
 

 
/* Plus */ 
 
.clsDashRegion_zipIndicator::after { 
 
\t content: '\002B'; 
 
} 
 

 
/* Minus */ 
 
.clsDashRegion_catgBloc--active .clsDashRegion_zipIndicator::after { 
 
\t content: '\002D'; 
 
\t font-size: 3rem; 
 
} 
 

 
.clsDashRegion_levelOne { 
 
\t width: 25rem; 
 
\t /* height: 100%; */ 
 
\t background: #3c4647; 
 
\t position: relative; 
 
} 
 
.clsDashRegion_catgBloc { 
 
\t position: relative; 
 
    left: 2%; 
 
\t width: calc(100% - 1rem); 
 
\t height: 12.6rem; 
 
} 
 
.clsDashRegion_catgBlocBackground { 
 
\t width: 100%; 
 
\t height: 100%; 
 
\t background-color: rgba(255,255,255,0.9); 
 
    opacity: 0.6; 
 
} 
 
.clsDashRegion_catgHeaderBloc { 
 
\t height: 2.5rem; 
 
\t background: aqua; 
 
} 
 
.clsDashRegion_catgLogoBloc { 
 
\t width: 2.5rem; 
 
\t height: 2.5rem; 
 
\t float: left; 
 
} 
 
.clsDashRegion_catgTitleBloc { 
 
\t float: left; 
 
\t width: calc(100% - 5.5rem); 
 
\t height: 2.5rem; 
 
\t color: #000000; 
 
\t font-weight: bold; 
 
\t font-size: 1.4rem; 
 
\t text-align: center; 
 
\t line-height: 2.5rem; 
 
} 
 
.clsDashRegion_catgReduceBloc { 
 
\t float: right; 
 
\t width: 3rem; 
 
\t height: 2.5rem; 
 
\t text-align: center; 
 
\t line-height: 2.5rem; 
 
} 
 
.clsDashRegion_catgTNTFMBloc { 
 
\t /* position: absolute; */ 
 
\t /*float: none;*/ 
 
\t display: block; 
 
    float: right; 
 
\t width: 10rem; 
 
\t height: 2.5rem; 
 
} 
 
.clsDashRegion_catgTitleTNTFM { 
 
\t float: left; 
 
\t width: 5rem; 
 
\t height: 2.5rem; 
 
\t color: #000000; 
 
\t text-align: center; 
 
    font-weight: bold; 
 
} 
 
.clsDashRegion_catgInfoBloc { 
 
\t position: relative; 
 
\t float: right; 
 
\t display: block; 
 
    width: 100%; 
 
\t height: 2.5rem; 
 
} 
 
.clsDashRegion_infoTitleBloc { 
 
\t float: left; 
 
\t width: 50%; 
 
    height: 2.5rem; 
 
\t font-weight: bold; 
 
\t margin-left: 1rem; 
 
} 
 
.clsDashRegion_infoValueBloc { 
 
\t float: right; 
 
\t width: 5rem; 
 
\t height: 2.5rem; 
 
\t text-align: center; 
 
} 
 
.clsDashRegion_wrapbuttonBlocTicket { 
 
\t position: relative; 
 
    float: left; 
 
    display: block; 
 
    width: 100%; 
 
\t height: 4rem; 
 
} 
 
.clsDashRegion_wrapbuttonBlocGE { 
 
\t position: relative; 
 
    float: left; 
 
    display: block; 
 
    width: 100%; 
 
\t height: 5rem; 
 
} 
 
.clsDashRegion_catgbuttonBloc { 
 
\t position: relative; 
 
\t float: left; 
 
    top: 1rem; 
 
    text-align: center; 
 
} 
 
.clsDashRegion_buttonValue { 
 
\t width: 5rem; 
 
    height: 1.5rem; 
 
\t margin-left: 2rem; 
 
    border: 1px solid; 
 
    line-height: 1.4rem; 
 
    background: chartreuse; 
 
\t border-style: groove; 
 
} 
 
.clsDashRegion_buttonTitle { 
 
\t margin-left: 1.5rem; 
 
    line-height: 1.4rem; 
 
\t font-weight: bold; 
 
} 
 
.clsDashRegion_catgInfoBlocSite { 
 
\t position: relative; 
 
\t float: right; 
 
\t display: block; 
 
    width: 100%; 
 
\t top: 0.5rem; 
 
\t text-align: center; 
 
\t font-weight: bold; 
 
} 
 
.clsDashRegion_valueTech { 
 
\t float: left; 
 
\t width: calc(100% - 4rem); 
 
\t margin-bottom: 0.5rem; 
 
\t border-style: groove; 
 
    letter-spacing: 2px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="clsSubPageArea"> 
 
\t \t <div class="clsDashRegion_levelOne"> 
 
\t \t \t <div class="clsDashRegion_catgBloc"> 
 
\t \t \t \t <div class="clsDashRegion_catgBlocBackground"> 
 
\t \t \t \t \t <div class="clsDashRegion_catgHeaderBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcAlarmeOn.svg"></div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleBloc">ALARMES</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgReduceBloc"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="clsDashRegion_catgTNTFMBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleTNTFM">TNT</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleTNTFM">FM</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="clsDashRegion_catgInfoBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_infoTitleBloc">Critique</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V1</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V2</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="clsDashRegion_catgBloc" style="height:8em;"> 
 
\t \t \t \t <div class="clsDashRegion_catgBlocBackground"> 
 
\t \t \t \t \t <div class="clsDashRegion_catgHeaderBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcPreventive.svg"></div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleBloc">TICKETS</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgReduceBloc"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="clsDashRegion_wrapbuttonBlocTicket"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgbuttonBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_buttonValue">V1</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_buttonTitle">En cours</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="clsDashRegion_catgBloc" style="height:20rem;"> 
 
\t \t \t \t <div class="clsDashRegion_catgBlocBackground"> 
 
\t \t \t \t \t <div class="clsDashRegion_catgHeaderBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/twcSite.svg"></div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleBloc">SITES</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_zipIndicator"></div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="clsDashRegion_sitesBloc" style="background:yellow;height: 17.5rem;position: relative;"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTNTFMBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_catgTitleTNTFM">TNT</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_catgTitleTNTFM">FM</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgInfoBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoTitleBloc">-3dB</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V1</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V2</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgInfoBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoTitleBloc">Rx</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V1</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V2</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgInfoBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoTitleBloc">Perte HF</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V1</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V2</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgInfoBloc"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoTitleBloc">Décrochage HS</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V1</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_infoValueBloc">V2</div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_wrapbuttonBlocGE"> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_catgInfoBlocSite">GE Actif</div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_catgbuttonBloc"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashRegion_buttonValue">V1</div> 
 
\t \t \t \t \t \t \t \t <div class="clsDashRegion_buttonTitle">En cours</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t \t <div class="clsDashRegion_catgbuttonBloc"> 
 
\t \t \t \t \t \t \t \t <div class="clsDashRegion_buttonValue">V2</div> 
 
\t \t \t \t \t \t \t \t <div class="clsDashRegion_buttonTitle">- 10 jrs</div> 
 
\t \t \t \t \t \t \t </div> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t \t 
 
\t \t \t <div class="clsDashRegion_catgBloc" style="height:18rem;"> 
 
\t \t \t \t <div class="clsDashRegion_catgBlocBackground"> 
 
\t \t \t \t \t <div class="clsDashRegion_catgHeaderBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgLogoBloc"><img src="../../Standard/Images/ICO/user-7.svg"></div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgTitleBloc">TECHNICIENS</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_catgReduceBloc"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcHaut.svg" style="width:1rem"> 
 
\t \t \t \t \t \t \t <img src="../../Standard/Images/ICO/twcBas.svg" style="width:1rem"> 
 
\t \t \t \t \t \t </div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t \t <div class="clsDashRegion_catgbuttonBloc"> 
 
\t \t \t \t \t \t <div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Astreinte</div> 
 
\t \t \t \t \t \t <div class="clsDashRegion_buttonValue clsDashRegion_valueTech">Services</div> 
 
\t \t \t \t \t </div> 
 
\t \t \t \t </div> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t

Source

2017-07-25 Zee

que je pourrais vous recommandons d'utiliser id par opposition aux classes pour une utilisation avec le javascript – Remi

@TheRickest j'ai essayé comme vous le dites id mais Stil la même question, i pense que le problème est dans mon code .. mais ne peut pas le comprendre – Zee

c'est juste des conseils de vie générale, id sur les classes pour js où vous pouvez l'aider à tracer toutes sortes de maux de tête – Remi

se produit parce que vous utilisez le sélecteur supplémentaire avec on('click', '.clsDashRegion_catgBloc',...

Essayez ceci:

$('.clsDashRegion_levelOne').on('click', '.clsDashRegion_catgBloc', function(event) { 
     // Toggle the panel next to the item that was clicked 
     $(event.target).toggleClass('clsDashRegion_catgBloc--active').next().toggle(); 
    });

$ (this) = $ ('.clsDashRegion_levelOne'); - bloc auquel vous ajoutez .on();

$ (événement.target) = $ ('.clsDashRegion_catgBloc'); - bloc qui a été exactement cliqué

exemple Fiddle: https://jsfiddle.net/z4tdxmbk/ Vérifiez this aussi

Source

2017-07-25 09:57:40 Constantine

merci pour votre réponse, mais ne le fait pas encore travail .. il me donne cette Untaxed SyntaxError: Identificateur inattendu – Zee

@Zinebs Vérifiez l'exemple. Peut-être va-t-il vous aider à comprendre ce qui se passe – Constantine

J'ai essayé votre réponse sans la mettre dans la fonction jquery ... cela fonctionne mais pas correctement ... avez-vous essayé de voir le résultat? – Zee

bascule Jquery ne fonctionne pas

Répondre

Questions connexes