Thursday, April 25, 2024
134
rated 0 times [  137] [ 3]  / answers: 1 / hits: 27235  / 10 Years ago, tue, february 18, 2014, 12:00:00

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…
})

More From » twitter-bootstrap

 Answers
5

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


[#72455] Monday, February 17, 2014, 10 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
irvinjovannix

Total Points: 416
Total Questions: 94
Total Answers: 117

Location: South Korea
Member since Sun, Aug 8, 2021
3 Years ago
;