javascript - 我如何修复子菜单的 jquery 脚本？

Question

这是代码，这是结果:您可以通过单击内部来查看测试菜单。

$(document).ready(function () {
    var $links = $('#menu-menu-1 .menu-item a').click(function () {



        var submenu = $(this).next();
        $subs.not(submenu).hide()
        submenu.toggle(500);
        $("#menu-2").slideToggle(300);
    });
    var $subs = $links.next(); });

问题是，如果我单击菜单，它会显示子菜单，但如果我不关闭已打开的子菜单，并且在菜单中打开另一个语音，则它无法正常工作。

如果我在 #menu-2 打开时单击另一个 .menu-item a 会发生什么？脚本正确关闭并打开另一个子菜单，但我的 #menu-2 close 仅​​关闭。然后，如果我关闭 .menu-item a 那么...#menu-2 打开。我该如何修复？

Answer 1

尝试

$(document).ready(function () {
    var $menu2 = $("#menu-2");
    var $links = $('#menu-menu-1 .menu-item a').click(function () {
        var submenu = $(this).next();
        $subs.not(submenu).hide();
        var isVisible = submenu.stop(true, true).is(':visible');
        $menu2.stop(true, true);
        if (isVisible) {
            submenu.hide(500);
            $menu2.slideUp(300);
        } else {
            $menu2.slideUp(300, function () {
                $menu2.slideDown(300);
                submenu.show(500);
            });
        }
    });
    var $subs = $links.next();
});