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

菜单上有jQuery的可折叠子菜单

2 个答案: