html - Bootstrap 5 mobile menu is not hiding after click

Question

I'm new in bootstrap. I'm using version 5 and can't solve my problem with responsive navigation. I want it to hide after clicking on the link (ofc in the mobile version with toggler button). I tried to use this:

$(function() {
    $('.navbar-nav a').on('click', function(){
    if($('.navbar-toggler').css('display') !='none'){
      $('.navbar-toggler').trigger( "click" );
    }
    });

But there's no results.

HTML:

 <nav id="nav-fixed" class="navbar navbar-expand-lg navbar-dark" style="background-color: #B60000;">
     <div class="container">
       <a class="navbar-brand ps-5" href="#"><img src="img/logo.png" alt="" width="150" height="100"></a>
       <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="collapse navbar-collapse" id="navbarSupportedContent">
         <ul class="navbar-nav ms-auto">
           <li class="nav-item px-4">
             <a class="nav-link" href="#about">Strona g?ówna</a>
           </li>
           <li class="nav-item px-4 dropdown">
             <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-bs-toggle="dropdown" aria-expanded="false">Us?ugi</a>
             <ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
               <li><a class="dropdown-item" href="#serwis">Serwis urzadzeń ppo?.</a></li>
               <li><a class="dropdown-item" href="#dokumentacja">Dokumentacja ppo?.</a></li>
               <li><a class="dropdown-item" href="#audyt">Audyt ppo?.</a></li>
               <li><a class="dropdown-item" href="#szkolenie-ppoz">Szkolenie ppo?. dla pracowników</a></li>
               <li><a class="dropdown-item" href="#zabezpiecznia-bierne">Bierne zabezpieczenia ppo?.</a></li>
             </ul>
           </li>
           <li class="nav-item px-4">
             <a class="nav-link" href="#kontakt">Kontakt</a>
           </li>
           <li class="nav-item px-4">
             <a class="nav-link" href="blog.html">Blog</a>
           </li>
         </ul>
       </div>
     </div>
   </nav>

Answer 1

You did not hide the class you just checked it is visible, but if it was not visible you would not be able to click it, try someting like this.

  $(function() {
     $('.navbar-nav a').on('click', function(){
        $(".navbar-toggler").hide();
     }
  });

Or if you want to use display property.

  $(function() {
     $('.navbar-nav a').on('click', function(){
        $(".navbar-toggler").css("display", "none");
     }
  });