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

希望這有助於！