Есть кнопка с меню
<button class="show-menu" style="display: flex; align-items: center;">
<h3>Помощь</h3>
</button>
<ul class="menu menu--hide">
<li class="menu__item" style="display: flex; align-items: center;" >
<p>Тест</p>
</li>
<li class="open-record-panel-btn menu__item" style="display: flex; align-items: center;" >
<p>Тест2</p>
</li>
</ul>
И такой код, который навешивает событие (скрывает открывает), но работает оно при клике, а надо фокусом. Подскажите как сделать, чтобы кнопка срабатывала фокусом, а при клике на другую область меню скрывалось
var linkBtn = document.querySelector('.show-menu');
if (linkBtn) {
linkBtn.addEventListener('click', function(event) {
event.preventDefault();
var menuList = document.querySelector('.menu--hide');
if(menuList) {
menuList.classList.toggle('menu--show');
}
});
}