如何使用幻灯片切换效果演奏手风琴？

Question

我有垂直菜单，我想为这个菜单演奏手风琴。html代码是

<ul id="menuLeft">
    <li id="ApplicationId" class="menu-li"><span><img src="../Images/tab_arrow.png"></span><a href="#">Application</a>
        <ul class="submenu-ul" style="display: none;">
            <li class="submenu-li"><span><img src="../Images/leftmenu_downarrow.png"></span><a href="#">Basic Information</a>
            </li>
            <li class="submenu-li"><span><img src="../Images/leftmenu_downarrow.png"></span><a href="#">Vipin</a>
            </li>
        </ul>
    </li>
    <li id="ReviewandSubmissionID" class="menu-li"><span><img src="../Images/tab_arrow.png"></span><a href="#">Review and Submission</a>
        <ul class="submenu-ul" style="display: none;">
            <li class="submenu-li"><span><img src="../Images/leftmenu_downarrow.png"></span><a href="#">Nithin</a>
            </li>
        </ul>
    </li>
</ul>

脚本是

$('.submenu-ul').hide();
$(document).on("click", ".menu-li", function () {
    var selected_li = $(this).attr('id');
    $('#' + selected_li + ' ul').slideToggle('slow');
});

我的问题是，当我单击一个菜单时，它会显示它的子菜单，但同时，如果我单击第二个菜单，它也会显示它的子菜单，而不会关闭第一个子菜单。我怎样才能解决这个问题？

我编辑了我的小提琴演示

这里

Answer 1

在打开新元素之前隐藏可见元素。

尝试：

变化

$u.appendTo($li);

至

$u.appendTo($li).hide();

$(document).on("click", "#" + value.MenuId, function () {        
    var selected_li = $(this).attr('id');        
    if(!($('#' + selected_li + ' ul').is(':visible'))){
        $('li ul:visible').slideUp();
    }
    $('#' + selected_li + ' ul').slideToggle('slow');
});

这是最新的小提琴。

Answer 2

在单击处理程序中，幻灯片显示所有其他submenu-ul元素。

var $subs = $('.submenu-ul').hide();
$(document).on("click", ".menu-li", function () {
    var selected_li = $(this).attr('id');
    var $ul = $(this).find('ul').stop(true, true).slideToggle('slow');
    $subs.not($ul).stop(true, true).filter(':visible').slideUp();
});

演示：小提琴