Многоуровневое выпадающее меню в mootols

Question

У меня есть проблема, я новичок в javascript и не могу обрабатывать многоуровневые вложенные блоки: мне нужно открыть вложенный блок, используя toogle и mootools. Я нашел несколько примеров, таких как accorodion, но мне нужен эффект toogle для вложенных блоков. Вы можете мне помочь? Спасибо. 1) здесь пример, который я нашел на JQuery, мне нужно то же самое, но на 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

Одна функция Mootools мне нравится Reveal.

Это может выявить вверх/вниз или влево/вправо.

Элемент element.toggle() будет привязан к противоположному состоянию (если открыт, закроется без анимации и т. Д.). В противном случае откроется/закроется элемент .reveal() или element.dissolve().

В вашем случае, вы хотели бы что-то вроде:

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(); 
     } 
    }); 
    } 
}); 

Я использую Mootools методы длинные руки здесь (избегая доллара), так что вы можете играть хорошо с другими системами (например, JQuery).

Документы Mootools довольно хорошо, но могут занять некоторые пробы и ошибки;)

Mootools Reveal

Вот пример с HTML/CSS:

JSFiddle Example

Я надеюсь, это помогает!