Bootstrap dropdown in mobile menu not closing on click

Issue

in my website which is done in bootstrap, there is a mobile menu, then menu is like below:

<a class="nav-link" href="#" id="shop_submenu" role="button" data-bs-toggle="dropdown" aria-expanded="true" data-bs-auto-close="true">
                        Rent Costumes
                      </a>

when user clicks on it, it expands and shows the items inside it. When you inspect it you can see a class 'show' is added and when u click it again the class is removed and it should close:

<a class="nav-link show" href="#" id="shop_submenu" role="button" data-bs-toggle="dropdown" aria-expanded="true" data-bs-auto-close="true">
                        Rent Costumes
                      </a>

however its not closing, can anyone please tell me how to close it when user clicks on it again. this is my live url: enter link description here

, thanks in advance

Solution

i have found an alternate solution for this, i used javascript to check even and odd clicks on the button and changed the style of the submenu accordingly, below is the code:

function myFunction() {
  let even = 'block';
  let odd = 'none';
  let elements = document.getElementsByClassName("dropdown-menu")

  Array.prototype.forEach.call(elements, function(element) {
    element.style.display === even ? element.style.display = odd : element.style.display = even
  });
}

<a class="nav-link" href="#" id="shop_submenu" onclick="myFunction()" role="button" data-bs-toggle="dropdown" aria-expanded="false" data-bs-auto-close="true">
                        Rent
                      </a>

Answered By - ZNO