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()

可点击的下拉菜单可以使用mouseleave吗？

1 个答案: