Create Bootstrap dropdown menu with and without JavaScript

Question

I am currently working through this Bootstrap 3 tutorial at TutorialRepublic: http://www.tutorialrepublic.com/twitter-bootstrap-tutorial/bootstrap-dropdowns.php

On that page there are among others two ways to create a dropdown menu:

using data attributes
using JavaScript

Markup for way 1:

<div class="bs-example">
   <div class="dropdown">
        <a href="#" data-toggle="dropdown" class="dropdown-toggle">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
        </ul>
    </div>
</div>

Markup for way 2:

<script type="text/javascript">
$(document).ready(function(){
    $(".dropdown-toggle").dropdown();
});  
</script>
<div class="bs-example">
   <div class="dropdown">
        <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a>
        <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
        </ul>
    </div>
</div>

Then the tutorial says:

The data-toggle="dropdown" is still required for the dropdown's trigger element regardless of whether you call the dropdown via JavaScript or data-api.

So my question is: What is the point in using way 2 if one still needs to specify the data attributes?

Walfrat · Accepted Answer · 2016-05-19 11:08:00Z

1

First : you can add the toggle attributes programmatically.

Second, by using jQuery you can control when you want your dropdown instantiated in order to interact with it. For instance to listen for events coming fro the drowdown as shown in your link.

If you just need pur HTML with all default behaviour of dropdown, go for 1, if you need something else, you'll see that you'll need often to add some javascript and control the object's life yourself.

edited May 19, 2016 at 11:08

answered May 19, 2016 at 9:16

Walfrat

5,3941 gold badge18 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Create Bootstrap dropdown menu with and without JavaScript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related