WordPress后台子菜单点击时出现闪烁问题的解决求助

大家好，我正在给WordPress后台菜单做自定义，想通过添加CSS和JavaScript实现点击时平滑展开/折叠的交互效果，但遇到了一个头疼的问题。

我的需求目标： #

• 点击带有子菜单的顶级菜单项时，展开对应的子菜单
• 再次点击同一个顶级菜单项，折叠它的子菜单
• 点击其他顶级菜单项时，收起当前所有展开的子菜单，再展开新点击的那一个
• 点击子菜单项时，直接跳转链接，不影响菜单的展开/折叠状态

目前我的代码基本能实现功能，但有个明显的问题：点击子菜单项的时候会出现闪烁（短暂收起再展开），有时候重复点击同一个顶级菜单项也会出现这个情况。我猜测是因为每次点击菜单内的元素时，JS都会重新评估整个菜单结构，哪怕不需要改变菜单的展开状态也会触发操作。

我试了好几种JS/jQuery的写法来管理菜单状态和点击事件，但都没解决这个闪烁问题。下面是我目前在用的代码，你可以在任意WordPress后台菜单里测试复现这个问题：

JavaScript代码：

(function($) {
    $(document).ready(function() {

        $('#adminmenu .wp-submenu').hide(); 
        $('#adminmenu > li.wp-has-submenu > a').off();
        $('#adminmenu > li.wp-has-submenu > a').on('click', function(e) {
            e.preventDefault();
            var $menuItem = $(this).parent();
            var $submenu = $menuItem.find('.wp-submenu').first();

            if ($submenu.is(':visible')) {
                $submenu.slideUp(150, function() {
                    $menuItem.removeClass('opensub');
                });
            } else {
                $('#adminmenu .wp-submenu:visible').slideUp(150, function() {
                    $(this).parent().removeClass('opensub');
                });

                $submenu.slideDown(150, function() {
                    $menuItem.addClass('opensub');
                });
            }
        });

        var $currentMenuItem = $('#adminmenu li.current');
        if ($currentMenuItem.length) {
            var $parentMenu = $currentMenuItem.closest('li.wp-has-submenu');
            $parentMenu.addClass('opensub');
            $parentMenu.find('.wp-submenu').show(); 
        }
    });
})(jQuery);

CSS代码：

#adminmenu li.wp-has-submenu .wp-submenu {
    position: static !important;
    display: none;
    box-shadow: none !important;
}

#adminmenu .wp-not-current-submenu .wp-submenu,
.folded #adminmenu .wp-has-current-submenu .wp-submenu {
    border-left-width: 0 !important;
    border: 0 !important;
}
#adminmenu .wp-has-current-submenu ul>li>a, .folded #adminmenu li.menu-top .wp-submenu>li>a {
    padding: 5px 14px !important;
}

有没有大佬能帮忙看看怎么解决这个闪烁的问题呀？

备注：内容来源于stack exchange，提问作者Evantix