mootols中的多级下拉菜单

Question

我有一些问题，我是新的JavaScript，不能处理多级嵌套块：我需要使用toogle和mootools打开嵌套块。我发现了一些像accorodion这样的例子，但我需要对嵌套块进行效果处理。 你能帮我吗？ 谢谢。 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的功能，我喜欢的是显示。

这可以显示上/下或左/右。

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

希望这有助于！