There are three ways of toggling the dropdown plugin’s hidden content in Bootstrap :
With data attributes : Add data-toggle = “dropdown” to some button or link to toggle a dropdown. For example,
<div class = "dropdown">
<a data-toggle = "dropdown" href = "#"> Dropdown trigger </a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>
With JavaScript : Following method is used for calling the dropdown toggle via JS:
$('.dropdown-toggle').dropdown()​
Using data-target attribute in place of href=“#”
– If the web browser isn’t enabling JavaScript, then it is better to keep links intact. For this, the data-target attribute is preferred over href=“#”
. For example,
<div class = "dropdown">
<a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/somepage.html">
Dropdown <span class = "caret"></span>
</a>
<ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">
...
</ul>
</div>