Google News
logo
Bootstrap-3 - Interview Questions
Could you explain how to use the Dropdown plugin in Bootstrap?
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>
Advertisement