Javascript 如何使用滑动切换效果执行手风琴

我有垂直菜单，我想为这个菜单表演手风琴。 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>

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

我编辑了我的小提琴演示

---

在单击处理程序中，向上滑动所有其他

子菜单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();
});

---

演示：

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

尝试：

改变

$u.appendTo($li);

到

---

@Hiral-请找到新提琴我有点怀疑。如何设置向上滑动和向下滑动的图像？

$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');
});