jquery - 如何在 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 闭包中调用全局变量？

标签： jqueryjavascript