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
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.