可单击的下拉菜单可以与mouseleave一起使用吗？

Question

我有一个HTML菜单，当用户单击菜单项时，将出现一个下拉子菜单。 当用户再次单击菜单项时，下拉菜单将关闭。

如果用户的鼠标离开该元素，我还希望该子菜单关闭。 下面的功能可与onclick一起使用，但最后几行（mouseleave）确实关闭了子菜单，但是当我再次单击菜单项时，该子菜单不会重新出现。

关于这项工作有什么建议吗？

吉姆

// This function toggles CSS classes to display the submenu when clicked and
// to alternate the triangle arrow.
function abcSubMenuFunction() {
  var y = document.getElementById("abcsubmenu");
  var suby = document.getElementById("symbolRotate");
  if (y.className === "abcsubmenu" && suby.className === "symbolrotate") {
      y.className += " responsive";
      suby.className += " responsive";
  } else {
      y.className = "abcsubmenu";
      suby.className ="symbolrotate";
  }
  $("#myTopnav").mouseleave(function(){
      y.className = "abcsubmenu";
      suby.className ="symbolrotate";
  })
}

Answer 1

简短的答案，将jQuery事件处理程序移到onClick函数之外。 这将需要将变量获取到处理程序范围内。

更长的答案，如果您想将所有内容打包在一起，请尝试：

function abcSubMenuFunction() {
  let menu = document.getElementById('abcsubmenu');
  let submenu = document.getElementById("symbolRotate");

  if (menu.className === 'abcsubmenu' && submenu.className === 'symbolrotate') {
    menu.className += " responsive";
    submenu.className += " responsive";
  } else {
    menu.className = "abcsubmenu";
    submenu.className ="symbolrotate";
  }

  // you could also use .bind() here
  $('#myTopnav').one('mouseleave', function() {
    menu.className = "abcsubmenu";
    submenu.className ="symbolrotate";

  });
}

jQuery .one（）和.bind（）