javascript - mootols 中的多级下拉菜单

Question

我有一些问题，我是 javascript 的新手，无法处理多层嵌套 block :我需要使用 toogle 和 mootools 打开嵌套 block 。我找到了一些像 accorodion 这样的例子，但我需要对嵌套 block 产生 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 Reveal

这是您的 HTML/CSS 示例:

JSFiddle Example

希望对您有所帮助!