event listener hide.bs.dropdown not firing in bootstrap 5

Question

function bsDropdown(e) {
  e.addEventListener('show.bs.dropdown',yay)
  e.addEventListener('hide.bs.dropdown',nay)
}
function yay() {
document.getElementById('yay').innerHTML = 'yay'
}
function nay() {
document.getElementById('nay').innerHTML = 'nay'
}
document.querySelectorAll('.dropdown-toggle').forEach(bsDropdown)


1
2


  
  
    Action
    Another action
    Something else here

Hemant · Accepted Answer

You might be looking for this Dropdown Events Issue

The closest behaviour can still be achieved like this

document.body.addEventListener("click", nay);
function bsDropdown(e) {
    e.addEventListener("show.bs.dropdown", yay);
}
function yay() {
    document.getElementById("yay").innerHTML = "yay";
}
function nay() {
    if (document.getElementById("dropdownMenuButton").classList.contains("show")) {
        document.getElementById("nay").innerHTML = "nay";
    }
}
document.querySelectorAll(".dropdown-toggle").forEach(bsDropdown);

body{
height:100vh;}



        1
        2

        
            
            
                Action
                Another action
                
                    Something else here

I have kept body height to 100vh to cover entire screen even when content is very small, i know that body eventListener will be triggered on every click on body, but i don't it will cause any issue.

event listener hide.bs.dropdown not firing in bootstrap 5

Answers (1)

Related Questions