Créer mon propre style d'accordéon avec jquery

Question

J'ai un var dans js qui contient une action de clic. Cette action est liée à quelques différents divs:

<div class="clickable"><div class="hidden">inner content 1</div></div> 

<div class="clickable"><div class="hidden">inner content 2</div></div> 

<div class="clickable"><div class="hidden">inner content 3</div></div> 

Js ressemble à ceci:

$(document).ready(function(){ 

var clicker = function(){ 

    $('.hidden').slideUp(); 

    $(this).children('.hidden').slideDown(); 

    $(this).unbind('click',clicker); 
} 


$('.clickable').bind('click',clicker); 


}); 

Le code ci-dessus fonctionne essentiellement. Si je clique sur un div.clickable, il montre le contenu caché. Si je clique sur un autre div.clickable, il cache le contenu que je regardais juste et en révèle un autre. Le problème est cependant que, à cause de cette fonction unbind dans 'clicker' tout ce que je clique perd sa fonctionnalité de clicker. Je l'ai fait parce que le contenu caché a des choses cliquables, et tout ce que je clique maintenant dans le contenu caché déclenche à nouveau "clicker".

Quelle est l'approche la plus intelligente sans utiliser les plugins d'accordéon?

Comment puis-je vérifier si un div a été lié à une fonction, et sinon, le relier ou quelque chose de ce genre? Tout ce que je cherche est de relier le div.clickable à 'clicker' une fois qu'il a été fermé, c'est-à-dire qu'un autre div.clickable .hidden est regardé.

Answer 1

Vous pouvez simplement exclure celui que vous cliquez sur dans le .slideUp(), comme ceci:

$(document).ready(function(){ 
    $('.clickable').click(function(){ 
    $('.hidden').not($(this).children()).slideUp(); 
    $(this).children('.hidden:hidden').slideDown(); 
    }); 
}); 

En utilisant .not() nous excluons l'élément courant dans les .hidden à masquer, et en montrant des enfants en le limitant aux seuls éléments :hidden, nous ne re-glisserons aucun élément déjà visible.

Une autre façon de réécrire un peu plus est clairement:

$(function(){ 
    $('.clickable').click(function(){ 
    $('.clickable').not(this).children('.hidden').slideUp(); 
    $(this).children('.hidden:hidden').slideDown(); 
    }); 
}); 

Ou, si tous les éléments sont .clickable frères et soeurs:

$(function(){ 
    $('.clickable').click(function(){ 
    $(this).children('.hidden:hidden').slideDown() 
    .end().siblings('.clickable').children('.hidden').slideUp(); 
    }); 
}); 

Answer 2

$(document).ready(function(){ 

var clicker = function(){ 

    $('.clickable').bind('click',clicker); 

    $('.hidden').slideUp(); 

    $(this).children('.hidden').slideDown(); 

    $(this).unbind('click',clicker); 
} 


$('.clickable').bind('click',clicker); 


});