Может ли выпадающая вырезка работать с помощью мыши?

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