How to create bootstrap dropdowns in jquery

Question

I have created bootstrap dropdown as below:

<ul style="right: 150px; position: absolute;">
    <li>  
        <ul class="nav">
            <li class="dropdown">
                <a class="dropdown-toggle" href="http://google.com">
                    Dropdown <b class="caret"></b>
                </a>
                <ul class="dropdown-menu">
                    <li><a href="#">Link 1</a></li>
                    <li><a href="#">Link 2</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

All the Links (Link1 and Link2) are displayed one below the other.

However, I should only be able to view the links by clicking the DropDown.

cracker · Accepted Answer · 2014-08-13 11:17:02Z

1

Try This

$( document.body ).on( 'click', '.dropdown-menu li', function( event ) {

      var $target = $( event.currentTarget );

      $target.closest( '.btn-group' )
         .find( '[data-bind="label"]' ).text( $target.text() )
            .end()
         .children( '.dropdown-toggle' ).dropdown( 'toggle' );

      return false;

   });

DEMO

answered Aug 13, 2014 at 11:17

cracker

4,9043 gold badges26 silver badges41 bronze badges

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

Collectives™ on Stack Overflow

How to create bootstrap dropdowns in jquery

1 Answer 1

DEMO

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