函数被调用而没有触发事件

Question

我有一个函数，我想用来扩展各个地方的菜单。我希望它是通过点击菜单关联按钮来触发的，但是目前正在页面加载时调用它（我假设在文档准备好的范围内），并且类'expanded'被添加而没有单击一个按钮。我很困惑，为什么出现这种情况，因为它应该被称为.on('click' ..

jQuery(document).ready(function ($) { 
    'use strict'; 

    $('#btn-expand-mobile-nav').on('click', showMenu('#side-navigation')); 

}); 

function showMenu(menu) { 
    var x = $(menu), 
     y = 'expanded'; 
    if (x.hasClass(y)) 
     x.removeClass(y); 
    else 
     x.addClass(y); 
} 

Answer 1

您会立即调用该函数。而不是使用匿名函数推迟执行：

$('#btn-expand-mobile-nav').on('click', function(){ 
    showMenu('#side-navigation') 
}); 

如果没有你可以这样做参数：

$('#btn-expand-mobile-nav').on('click', showMenu); 

简单化的解释@skobaljic：

通过使用函数名称，您指向变量showMenu，并称稍后将其作为函数调用。

通过使用function(){}您是说，这里是一个临时变量，包含一个函数，您可以稍后调用。

例如它是相同的：

var temp = function(){ 
    showMenu('#side-navigation') 
} 
$('#btn-expand-mobile-nav').on('click', temp); // No parenthesis on temp 

由于@Dave Newton正确地指出，这是可以使用toggleClass简化：

$('#btn-expand-mobile-nav').on('click', function(){ 
    $('#side-navigation').toggleClass("expanded"); 
});