可點擊的下拉菜單可以使用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()