Jquery Akkordeon

Question

Ich versuche ein einfaches Akkordeon zu machen, wo der Benutzer auf Level 1 klickt, um Level 2 zu sehen, auf Level 2 klickt, um Level 3 zu sehen und so weiter. Level 1 wird mehrmals dupliziert, also verwende ich die .children-Methode, um zu vermeiden, dass alle Levels 2 geöffnet werden, wenn Level 1 angeklickt wird.

Das Problem ist, wenn Stufe 2 angeklickt wird, öffnet es Stufe 3, aber schließt auch Stufe 1. Ich könnte jedes Ziel direkt ansprechen, um dieses Problem zu lösen, aber ich möchte es mit der minimalen Menge an Code machen. Irgendwelche Vorschläge würden sehr geschätzt.

<div class="level1"> 
Level 1 
    <div class="level2"> 
    Level 2 
     <div class="level3"> 
     Level 3 
     </div> 
    </div> 
</div> 

<script type="text/javascript"> 

$(document).ready(function(){ 
    $('.level1').click(function(){ 
     $(this).children('.level2').slideToggle('300'); 
     }); 
}); 
</script> 

Answer 1

können Sie machen, dass mehr Generika (so können Sie leicht mehr Ebenen später wie hinzufügen):

<div class="level1 acc"> 
Level 1 
    <div class="level2 acc"> 
    Level 2 
     <div class="level3 acc"> 
     Level 3 
     </div> 
    </div> 
</div> 

(function($) { 
    $('.acc').click(function(){ 
     $(this).children('div').slideToggle('300'); 

     return false; // this prevents event bubbling (thus preventing the behavior you have now) 
    }); 
})(jQuery); 

Demo: http://jsfiddle.net/PeeHaa/7gAzx/

Answer 2

starten:

$(document).ready(function(){ 
    $('div').click(function(event){ 
     $(this).find(">:first-child").slideToggle('300'); 
     event.stopPropagation(); 
    }); 
});​ 

Diese öffnet nur das erste Kind - example here. Sie benötigen die event.stopPropagation, um das Ereignis zu stoppen, das den DOM-Baum sprudelt und unerwartete Wechsel bewirkt!

Answer 3

Sie können jeder Teilung ein gemeinsames propert, um überschüssige wie Klasse geben

<div class="level" id="level1"> 
    Level 1 
    <div class="level" id="level2" > 
    Level 2 
     <div class="level" id="level3" > 
     Level 3 
    </div> 
</div> 

dann können Sie sie wechseln als

$('.level').click(function() { 
    $(this).children('div').slideToggle('300'); 
    event.stopPropagation(); 
}); 

nach jedem Klick Sie das Ereignis beenden Ausführung wieder
Ich denke, Dies wird Ihnen helfen
Hier ist das Beispiel http://jsfiddle.net/Simplybj/aZ5wv/