Блог

 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) 

 <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<p id="yay">1</p>
<p id="nay">2</p>

<div class="dropdown">
  <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-bs-toggle="dropdown" aria-expanded="false">
    Dropdown button
  </button>
  <ul class="dropdown-menu" aria-labelledby="dropdownMenuButton">
    <li><a class="dropdown-item" href="#">Action</a></li>
    <li><a class="dropdown-item" href="#">Another action</a></li>
    <li><a class="dropdown-item" href="#">Something else here</a></li>
  </ul>
</div>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"></script> 

 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;} 

 <link
            href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
            rel="stylesheet"
            integrity="sha384-giJF6kkoqNQ00vy HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
            crossorigin="anonymous"
        />

        <p id="yay">1</p>
        <p id="nay">2</p>

        <div class="dropdown">
            <button
                class="btn btn-secondary dropdown-toggle"
                type="button"
                id="dropdownMenuButton"
                data-bs-toggle="dropdown"
                aria-expanded="false"
            >
                Dropdown button
            </button>
            <ul class="dropdown-menu hide" aria-labelledby="dropdownMenuButton">
                <li><a class="dropdown-item" href="#">Action</a></li>
                <li><a class="dropdown-item" href="#">Another action</a></li>
                <li>
                    <a class="dropdown-item" href="#">Something else here</a>
                </li>
            </ul>
        </div>
        <script
            src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
            integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
            crossorigin="anonymous"
        ></script>