[BootStrap] Menu déroulant slideUp avec mouseleave()

Bonjour
j'ai conçu un menu déroulant avec BOOTSTRAP il marche bien, il disparait quand je clique à l'extérieur du menu. Je voudrais le faire disparaitre quand je sors du menu, j'ai ajouté une ligne de code Jquery, quand je sors du menu il disparait, mais mon <a>Catégories </a> son état reste cliqué et je suis obligé de réactualiser la page pour qu'il remarche à nouveau.
Y a-t-il besoin d'enlever une class BOOTSTRAP en ajoutant du Jquery ? Y a-t-il une class BOOTSTRAP pour faire cela sans ajouter du code Jquery ?

Code:

1
2
3
4
5
6
7
8
9
10
11
12
<li class="nav-item dropdown">
                            <a class =" categories nav-link  px-3 dropdown-toggle" href="#"  data-bs-toggle="dropdown">
                                Catégories
                            </a>
                            <div class="dropdown-menu">
                                <?php $categories = $categoriesController->getCategories();?>
                                <?php foreach($categories as $categ) :?>
                                    <a class="dropdown-item"  href="./vueCategorie.php?id=<?=$categ['id_cat']?>"><?=$categ["nom"]?></a>
                                <?php endforeach ?>     
                            </div>
                        </li>
                    </ul>

Code:

1
2
3
4
5
6
 <script>
$(document).ready(function(){
  $(".dropdown-menu").mouseleave(function(){
    $(this).slideUp();
  });
});

merci pour votre aide