如何在JavaScript闭包中使用全局变量？

Question

我写了一个自定义菜单切换代码，如下所示：

var menu_trigger = $('.has-submenu > .nav-link');
menu_trigger.on('click', function(e) {
    e.preventDefault();

    var this_menu        = $(this);
    var this_menu_parent = this_menu.parent('.has-submenu');
    var this_submenu     = this_menu.find('.submenu');

    if( this_menu_parent.hasClass('active') ) {
        this_submenu.slideUp('500');
        this_menu_parent.removeClass('active'); // <--- HERE
    } else {
        this_submenu.slideDown('500');
        this_menu_parent.addClass('active'); // <--- AND, HERE
    }
});

HTML如下：

<li class="has-submenu active">
    <a class="nav-link" href="#">Parent Menu</a>
    <div class="submenu">
        <a class="dropdown-item" href="/child-1">Child 1</a>
        <a class="dropdown-item active" href="/child-2">Child 2</a>
        <a class="dropdown-item" href="/child-3">Child 3</a>
    </div>
</li>

与他们一起，我使用一些CSS不显示任何内容，并使用.active类，显示块等。

工作正常。但是，使用CSS方法，实际上会失去滑动效果。当.active类消失时，CSS触发，并且子菜单也消失了，因此没有可见的滑动效果。

可以通过轻松回调到slideUp()和slideDown()来解决。所以我尝试了这个：

if( this_menu_parent.hasClass('active') ) {
    this_submenu.slideUp('500', function() {
        this_menu_parent.removeClass('active'); // <--- HERE
    });
} else {
    this_submenu.slideDown('500', function() {
        this_menu_parent.addClass('active'); // <--- AND, HERE
    });
}

但是如您所见，变量this_menu_parent在闭包内部未正确调用，因此不起作用。在PHP中，我们使用use表示法，类似于function(use global_var) { return global_var * 30 }，但这不适用于JavaScript。

如何在JavaScript闭包内调用全局变量？