I am currently working on a dropdown menu using HTML/CSS/JavaScript/jQuery and Bootstrap 5. The objective is to have the menu open/close both when hovered over and clicked on:
- When the mouse hovers over the dropdown element, the menu should open
- Once the mouse leaves the dropdown element, the menu should close
- If a list item is clicked, the menu should also close
Bootstrap naturally closes the dropdown menu when a list item is clicked, but due to the addition of hover functionality, this feature is not functioning properly. Currently, the menu only closes once the user moves the mouse outside the dropdown menu. This behavior aligns with the open/close functionality based on hover, however, I am exploring if there's a way for the menu to still close when an item is clicked.
I attempted to add a click function to toggle the opening/closing of the menu, as well as included
data-bs-auto-close="true"Has anyone faced a similar situation before or found a possible solution? Refer to my code below. Please note that the hover functionality doesn't work when running the code in S/O, so the problem may not be evident here. To experience the issue, it's recommended to run the code in 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;
}<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ed8f8282999e999f8c9dadd8c3dcc3de">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="63010c0c17101711021323564d524d50">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
<div class="dropdown">
<div class="deep-dive-toggle-container dropdown-toggle" type="button" id="account-toggle-container" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
<div class="deep-dive-toggle-text">Account</div>
</div>
<ul class="dropdown-menu" aria-labelledby="accountDropdown">
<li id="recap-dropdown-item" class="dropdown-item">Recap</li>
<li id="account-timeline-dropdown-item" class="dropdown-item">
Timeline
</li>
<li id="breakdowns-dropdown-item" class="dropdown-item">
Breakdowns
</li>
<li id="search-dropdown-item" class="dropdown-item">Search</li>
<li id="account-posts-dropdown-item" class="dropdown-item">
Posts
</li>
</ul>
</div>