如何使用Mootools創建下拉列表？

Question

我想將下拉列表添加到表單中（按鈕的onclick事件）。 我知道這是JS的基礎。 但請幫助！ 提前致謝！

Answer 1

這里有一個很好的例子，包括所有必需的HTML，Javascript和CSS。

HTML：

<div id="menu-container">
<ul id="drop_down_menu">
    <li class="menu">Menu 1
        <ul class="links">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </li>
    <li class="menu">Menu 2
        <ul class="links">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
            <li><a href="#">Link 3</a></li>
        </ul>
    </li>
</ul>

Javascript：

window.addEvent('domready', function(){
$('drop_down_menu').getElements('li.menu').each( function( elem ){
    var list = elem.getElement('ul.links');
    var myFx = new Fx.Slide(list).hide();
    elem.addEvents({
        'mouseenter' : function(){
            myFx.cancel();
            myFx.slideIn();
        },
        'mouseleave' : function(){
            myFx.cancel();
            myFx.slideOut();
        }
    });
})
});