事件处理程序在事件发生之前触发

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

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

尝试以下操作：

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");
    });
}

nb：现代jQuery使用.on('click', ...)而不是.click(...)。根据参数列表，它有助于避免使用用于触发和绑定处理程序的.click混淆。我没有修改您的代码来使用该代码，以防您仍在旧版本的jQuery中。