Multilevel Drop-Down in Mootols

Question

Ich habe ein Problem, ich bin neu in Javascript und kann nicht mit verschachtelten Multilevel-Blöcke umgehen: Ich muss verschachtelte Block mit Toogle und Mootools öffnen. Ich habe ein paar Beispiele wie accorodion gefunden, aber ich muss einen Effekt auf verschachtelte Blöcke haben. Können Sie mir helfen? Danke. 1) hier Beispiel, dass ich auf jquery gefunden, ich brauche das gleiche, aber auf Mootools

$('.nested-accordion').find('.comment').slideUp(); 
 
$('.nested-accordion').find('h3').click(function(){ 
 
    $(this).next('.comment').slideToggle(100); 
 
    $(this).toggleClass('selected'); 
 
});

* { 
 
    margin: 0; 
 
    padding: 0; 
 
    line-height: 1.5; 
 
    font-size: 1em; 
 
    font-family: Calibri, Arial, sans-serif; 
 
} 
 

 
.container { 
 
    margin: 0 auto; 
 
    width: 80%; 
 
} 
 

 
.nested-accordion { 
 
    margin-top: 0.5em; 
 
    cursor: pointer; 
 
} 
 
.nested-accordion h3 { 
 
    padding: 0 0.5em; 
 
} 
 
.nested-accordion .comment { 
 
    line-height: 1.5; 
 
    padding: 0.5em; 
 
} 
 
.nested-accordion h3 { 
 
    color: #47a3da; 
 
} 
 
.nested-accordion h3:before { 
 
    content: "+"; 
 
    padding-right: 0.25em; 
 
    color: #becbd2; 
 
    font-size: 1.5em; 
 
    font-weight: 500; 
 
    font-family: "Lucida Console", Monaco, monospace; 
 
    position: relative; 
 
    right: 0; 
 
} 
 
.nested-accordion h3.selected { 
 
    background: #47a3da; 
 
    color: #fff; 
 
} 
 
.nested-accordion h3.selected:before { 
 
    content: "-"; 
 
} 
 
.nested-accordion .comment { 
 
    color: #768e9d; 
 
    border: 0.063em solid #47a3da; 
 
    border-top: none; 
 
} 
 
.nested-accordion a { 
 
    text-decoration: none; 
 
    color: #47a3da; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class='nested-accordion'> 
 
    <h3>Heading</h3> 
 
    <div class='comment'> 
 
     This is a comment 
 
     <div class='nested-accordion'> 
 
     <h3>Heading</h3> 
 
     <div class='comment'> 
 
      This is a another content which is really long and pointless but keeps on going and it technically a run-on sentence but here is a link to google to distract you -> <a href='http://google.com' target='_blank'>link</a> 
 
      <div class='nested-accordion'> 
 
      <h3>Heading</h3> 
 
      <div class='comment'>This is a another content</div> 
 
      </div> 
 
      <div class='nested-accordion'> 
 
      <h3>Heading</h3> 
 
      <div class='comment'>This is a another content</div> 
 
      </div> 
 
     </div> 
 
     </div> 
 
     <div class='nested-accordion'> 
 
     <h3>Heading</h3> 
 
     <div class='comment'>This is a another content</div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class='nested-accordion'> 
 
    <h3>Heading</h3> 
 
    <div class='comment'>This is a another content</div> 
 
    </div> 
 
</div>

Answer 1

Eine Mootools Funktion I Reveal mögen.

Dies kann auf/ab oder links/rechts zeigen.

element.toggle() springt in den entgegengesetzten Zustand (wenn geöffnet, schließt ohne Animation usw.). Andernfalls wird element.reveal() oder element.dissolve() geöffnet/geschlossen.

In Ihrem Fall würden Sie so etwas wie:

var container = document.getElement('.container'); 
Array.each(container.getElements('.comment'), function(comment){ 
    comment.set('reveal', {duration: 250}).toggle(); 
    if(comment.getPrevious('h3')){ 
    comment.getPrevious('h3').addEvent('click', function(e){ 
     var comment = e.target.getNext('.comment'); 
     if(comment.getStyle('display')==='block'){ 
     e.target.getNext('.comment').dissolve(); 
     }else{ 
     e.target.getNext('.comment').reveal(); 
     } 
    }); 
    } 
}); 

Ich verwende Mootools hier lange Hand Methoden (Dollar zu vermeiden), so dass Sie mit anderen Frameworks schön spielen können (wie jQuery).

Die Mootools docs sind ziemlich gut, aber einige Versuch und Irrtum kann nehmen; hier)

Mootools Reveal

ist ein Beispiel mit HTML/CSS:

JSFiddle Example

Ich hoffe, das hilft!