Раскрывающийся список Bootstrap 5 открывается/закрывается при нажатии и наведении курсора мыши ⇐ Jquery

[Anonymous]

Я создаю раскрывающееся меню, используя HTML/CSS/JavaScript/jQuery и Bootstrap 5. Я хочу, чтобы меню открывалось/закрывалось как при наведении курсора, так и при нажатии:

• Мышь наводит курсор на раскрывающийся элемент, и меню открывается.
• Мышь покидает раскрывающийся элемент, и меню закрывается.
• При щелчке по элементу списка. , меню также закрывается.

Bootstrap автоматически закрывает раскрывающееся меню при щелчке элемента списка, однако, поскольку я добавил дополнительную функцию наведения мыши, это не так. дольше работает. Меню не закрывается, пока пользователь не выведет указатель мыши за пределы раскрывающегося меню. Это имеет смысл, учитывая код открытия/закрытия при наведении курсора, но мне интересно, есть ли способ закрыть меню, когда пользователь действительно нажимает на элемент.
Я попробовал добавить функцию щелчка для переключения меню на открытие/закрытие, а также пробовал добавить data-bs-auto-close="true" в раскрывающийся элемент, но ни одно из решений не работает.
Кто-нибудь уже сталкивался с подобным сценарием или видел потенциальное решение? Мой код смотрите ниже. Обратите внимание: по какой-то причине, когда я запускаю код здесь, в S/O, функция наведения не работает, и поэтому проблема не может быть эффективно продемонстрирована. Однако если вы запустите код в CODEPEN, проблема очевидна.

Код: Выделить всё

// Hide menu on click solution #1
$(".dropdown").on("click", () => {
var dropdownMenu = $(this).children(".dropdown-menu");
if (dropdownMenu.is(":visible")) {
console.log("hide menu");
dropdownMenu.css("display", "none");
}
});

// Hide menu on click solution #2
$(".dropdown-menu > li").click(function() {
console.log("hello");
$(this).removeClass("show").attr("aria-expanded", "false");
$(this).find(".dropdown-menu").removeClass("show");
});

Код: Выделить всё

// Show dropdown on mouse hover
.dropdown:hover .dropdown-menu {
display: block;
}

Код: Выделить всё

[*]




Account

[list]
Recap
[*]
Timeline

[*]
Breakdowns

[*]Search
[*]
Posts

[/list]

Подробнее здесь: https://stackoverflow.com/questions/787 ... -and-hover