帶有可折疊子菜單的jQuery菜單

Question

我正在嘗試使用可折疊的子菜單制作菜單。.我對jQuery非常陌生）我的代碼：

<script type="text/javascript">
    $(document).ready(function(){
    $('#list> li > ul')
    .hide()
    .click(function(e){
        e.stopPropagation();
    });
    $('#list> li').toggle(function(){
        $(this).find('ul').slideDown();
    }, function(){
        $(this).find('ul').slideUp();
    });
    });
</script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"/>

<ul id="list">
    <li><a href="#">SUBMENU1</a>
        <ul>
            <li><a href="#">M11</a></li>
            <li><a href="#">M12</a></li>
            <li><a href="#">M13</a></li>
            <li><a href="#">M14</a></li>
        </ul>
    </li>
    <li><a href="#">SUBMENU2</a>
        <ul>
            <li><a href="#">M21</a></li>
            <li><a href="#">M22</a></li>
            <li><a href="#">M23</a></li>
            <li><a href="#">M24</a></li>
        </ul>
    </li>
</ul>

現在它可以正常工作，但是當我單擊另一個子菜單時，我希望所有打開的子菜單都自動關閉。因此，一次只能有一個打開的子菜單。

Answer 1

$('#list > li').siblings().find('ul').hide();
$('#list > li').click(function () {
    $(this).addClass('active').siblings().removeClass('active');
    $(this).siblings().find('ul').slideUp();
    $(this).find('ul').slideDown();
});

演示：

http://jsfiddle.net/2QKe9/

更新的演示：

http://jsfiddle.net/2QKe9/2/

Answer 2

試試這個

$(document).ready(function(){
$('#list> li > ul')
.hide()
.click(function(e){
    e.stopPropagation();
});
$('#list> li').click(function(){
    if($(this).find('ul').is(':visible'))
    {
       $(this).find('ul').slideUp() 
    }
    else
    {
    $(this).siblings().find('ul').slideUp()
    $(this).find('ul').slideDown();
    }
});
});

DEMO