可点击的下拉菜单可以使用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()