Многоуровневый выпадающий в 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 () переместится в противоположное состояние (если открыто, закроется без анимации и т. д.). В противном случае element.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 показывают

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

Пример JSFiddle

Надеюсь, это поможет!