I am encountering a common issue with collapsing the navbar on smaller screens and triggering an event when the collapse button icon is clicked. Despite my efforts to find a solution, I have been unsuccessful in using the following JavaScript code:
$('#main_nav').on('hidden.bs.collapse', function () {
alert('collapse')
})
Additionally, I tried this approach:
$('.navbar-collapse').on('show.bs.collapse', function () {
console.log("collapse");
});
Here is the current state of my code:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<nav class="autohide navbar navbar-expand-lg navbar-dark" id='my-nav' >
<div class="container-fluid">
<a class="navbar-brand" href="/">
<img src="" alt="logo" width="40" height="40" id="logo"/>
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#main_nav">
<span className="navbar-toggler-icon" id="toggler"></span>
</button>
<div class="collapse navbar-collapse text-color" id="main_nav">
</div>
</div>
</nav>
Could you please advise me on which class/id I should use in the jQuery event listener to properly handle the collapse button click event on smaller screens?