JQuery toggleClass parents et les enfants

Je suis juste arriver à connaître Javascript et JQuery et je ne peux pas comprendre cela: Est-il une façon plus simple pour cela: 

$(".toggle").click(function(){
$(this).parent().toggleClass("collapsed");
$(this).parent().children().toggleClass("collapsed");
$(this).parent().next(".abcContent").toggle(0);

Je suis content d'avoir réussi à le faire fonctionner, après tout, mais sûrement, ce n'est pas comment c'est fait correctement... je veux basculer la classe parent (abcTitle), y compris ses enfants (bouton).

<div class="abcTitle">
<div class="abcButton toggle"></div>
<h4 class=toggle>Title</h4><div class="sortable"></div>
</div>
<div class="abcContent">Content</div>

Merci de m'éclairer!

De précisions voici quelques CSS 

.abcButton {
    background-image:url(minus.png);
}
.abcButton.collapsed {
    background-image:url(plus.png); 
}
.abcTitle {
    border-top-left-radius:14px;
}
.abcTitle.collapsed {
    border-bottom-left-radius:14px;
}

Donc, fondamentalement, un clic sur abcButton ou H4 est censé déclencher l'effondrement de abcContent tout en ajoutant de la classe .s'est effondré à la fois abcButton et abcTitle.

(Btw, Si je pouvais comprendre comment exclure 

<div class="sortable"></div>

à partir de la fonction de clic seulement je pouvais faire abcTitle mon gestionnaire de clic, sans avoir besoin de les séparer abcButton et h4)

  • Si vous essayez d'afficher/masquer tous les différents éléments sur le même plan, ne serait-il pas plus facile de cacher un récipient qui les contient?
  • Vous ne savez pas si c'est ce que je veux faire... je suis en train d'essayer de masquer/afficher un élément, tout en ajoutant des classes à certaines autres.
InformationsquelleAutor Tim | 2011-01-19
  1. 1

    Vous devriez cache, ou de la chaîne, votre objet jQuery; $(this).parent() est calculée en 3 fois.

    $(".toggle").click(function(){
    var self = $(this).parent();

    self.toggleClass("collapsed");
    self.children().toggleClass("collapsed");
    self.next(".abcContent").toggle(0);

    Vous ne devriez pas besoin d'ajouter de la collapsed de la classe à vos enfants des éléments; vous CSS devrait fonctionner dès que les éléments sont réduites du fait, le parent a la classe de l'effondrement.

    div.abcTitle h4 {
    /* Styles when the element is shown */
}

div.abcTitle.collapsed h4 {
    /* Styles when the element is collapsed */
}

    Vous pouvez sans doute vous garantir que l'élément suivant sera toujours le abcContent, de sorte que vous ne devriez pas avoir à vous soucier de la sélection de l'élément suivant.

    Si vous basculer un certain nombre d'éléments, il sera préférable d'utiliser la déléguer ou live méthodes qui utilisent la remontée d'événements mécanismes de JavaScript; le gestionnaire d'événement est seulement lié à un élément, plutôt que tous les autres, l'augmentation de la performance.

    Ayant dit tout cela, une meilleure solution pourrait être comme suit:

    $(document).delegate('.toggle', 'click', function () {
    $(this).parent().toggleClass('collapsed').next().toggle();
});
    • Merci beaucoup! "Chaînage" fonctionne très bien (si, en effet, par la var self = $(this); - vous dire var self = $(this).parent() de Votre "meilleure solution" fonctionne également avec l'exeption que toggleClass ne fonctionne que sur abcTitle mais ne fonctionne pas sur abcButton. Probablement quelque chose de mal avec mon css...
    • Oups, je n'ai en effet var self = $(this).parent(). Heureux d'entendre ça aide.
    InformationsquelleAutor Matt
  2. -1
    $(document).ready(function(){ 

$(".clickclassname").click(function(){ 

$("body").toggleClass("addclassname"); 
}); 

});
    InformationsquelleAutor amanpreet Singh