0 votes
in Bootstrap by

How do you use the Dropdown plugin?

1 Answer

0 votes
by
You can toggle the dropdown plugin's hidden content −

Via data attributes − Add data-toggle = "dropdown" to a link or button to toggle a dropdown as shown below −

<div class = "dropdown">

   <a data-toggle = "dropdown" href = "#">Dropdown trigger</a>

   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">

    ...

   </ul>

</div>

If you need to keep links intact (which is useful if the browser is not enabling JavaScript), use the data-target attribute instead of href="#" −

<div class = "dropdown">

   <a id = "dLabel" role = "button" data-toggle = "dropdown" data-target = "#" href = "/page.html">

      Dropdown

    

      <span class = "caret"></span>

   </a>

    

   <ul class = "dropdown-menu" role = "menu" aria-labelledby = "dLabel">

      ...

   </ul>

</div>

Via JavaScript − To call the dropdown toggle via JavaScript, use the following method −

$('.dropdown-toggle').dropdown()

Related questions

0 votes
asked Sep 9, 2023 in VueJS by AdilsonLima
+1 vote
asked May 27, 2020 in Bootstrap by sharadyadav1986
...