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

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

我编辑了我的小提琴演示

HERE

Answer 1

在点击处理程序中，向上滑动所有其他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();
});

演示：Fiddle

Answer 2

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

尝试：

更改

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

Updated fiddle here.

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

2 个答案: