Process for using show.bs.dropdown in Bootstrap [closed]

Question

What is the process for using the show.bs.dropdown event when a dropdown is clicked?

Example:

When I clicked the dropdown to expand, it needs to run the code:

$('#myDropdown').on('show.bs.dropdown', function () {
  // do something…
})

Answer 1

Bootstrap 5 (update 2021)

The Bootstrap dropdown show event is triggered by the dropdown toggle (data-bs-toggle="dropdown") element. Also, jquery is no longer required, so vanilla JS can be used...

var theDropdown = document.getElementById('dropdownMenuLink')
theDropdown.addEventListener('show.bs.dropdown', function () {
     alert('hi');
})

theDropdown.addEventListener('hide.bs.dropdown', function () {
     alert('bye');
})

https://codeply.com/p/mbImPQWhI4

---

Bootstrap 4

Like Bootstrap 3. the Bootstrap 4 dropdown events are tied to the parent element of the dropdown.

https://codeply.com/go/vObdBWFwnL

---

Bootstrap 3

The Bootstrap dropdown show event is tied to the parent element of the dropdown. For example, notice the id=myDropdown..

<div class="btn-group" id="myDropdown">
  <a class="btn dropdown-toggle" data-toggle="dropdown" href="#">
    Menu
    <span class="caret"></span>
  </a>
  <ul class="dropdown-menu">
    <li><a href="#">Choice1</a></li>
    <li><a href="#">Choice2</a></li>
    <li><a href="#">Choice3</a></li>
    <li class="divider"></li>
    <li><a href="#">Choice..</a></li>
  </ul>
</div>

Is handled by this event..

$('#myDropdown').on('show.bs.dropdown', function () {
  alert('hello');
})

Demo: https://codeply.com/p/rHEGwyvuwx