javascript - 在jQuery中发生事件之前触发的事件处理程序

Question

我正在做一个大型下拉菜单，用户单击一个项目以显示扩展名。我想要一个项目的两个结果：

1. 要显示的扩展名
2. 要为菜单项更改的背景颜色（被点击的那个）

但我很难过，这两个结果都发生在 onclick 事件发生之前。

到目前为止，所有其他事情都很好，下面是我的代码

//call the showMenu function to toggle menu items display   
showMenu("#market", "#marketDrop");
showMenu("#jobs", "#jobsDrop");
showMenu("#career", "#careerDrop");
showMenu("#tech", "#techDrop");
showMenu("#estate", "#estateDrop");
showMenu("#fair", "#fairDrop");
showMenu("#leisure", "#leisureDrop");
showMenu("#exclusive", "#exclusiveDrop");

//the showMenu function
function showMenu(listItem, dropDown){
  //first hide the main drop down containers
  $(dropDown).hide();   
  $(listItem).click(function() {
    $(dropDown).fadeToggle();
  });

  $(listItem).click().css("background-color", "#000");      
}

Answer 1

您的最后一行是立即触发点击，而不是绑定点击处理程序。

尝试这个：

function showMenu(listItem, dropDown){
    //first hide the main drop down containers
    $(dropDown).hide();   

    // register the click handler
    $(listItem).click(function() {
        $(dropDown).fadeToggle();
        $(this).css("background-color", "#000");
    });
}

注意：现代 jQuery 使用.on('click', ...)而不是.click(...). 它有助于避免与.click用于触发和绑定处理程序的混淆，具体取决于参数列表。我没有修改你的代码来使用它，以防你还在使用旧版本的 jQuery。