Question

161

Event handlers for Twitter Bootstrap dropdowns?

rated 0 times [ 165] [ 4] / answers: 1 / hits: 132473 / 12 Years ago, thu, august 16, 2012, 12:00:00

I'd like to use a Twitter Bootstrap dropdown button:

    <div class=btn-group>

      <button class=btn dropdown-toggle data-toggle=dropdown>Action <span class=caret></span></button>

      <ul class=dropdown-menu>

        <li><a href=#>Action</a></li>

        <li><a href=#>Another action</a></li>

        <li><a href=#>Something else here</a></li>

      </ul>

    </div><!-- /btn-group -->

When the user changes the value of the button to 'Another action', instead of simply navigating to #, I'd actually like to handle the action in a custom way.

But I can't see any event handlers in the dropdown plugin for doing this.

Is it actually possible to use Bootstrap dropdown buttons to handle user actions? I'm starting to wonder if they're only intended for navigation - it's confusing that the example gives a list of actions.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

matteo

Add To Favorites

Follow

Total Points: 81

Total Questions: 100

Total Answers: 96

Location: Honduras

Member since Sat, Jul 24, 2021

3 Years ago

answered 12 Years ago kristinsonjab · Accepted Answer

Twitter bootstrap is meant to give a baseline functionality, and provides only basic javascript plugins that do something on screen. Any additional content or functionality, you'll have to do yourself.

<div class=btn-group>

  <button class=btn dropdown-toggle data-toggle=dropdown>Action <span class=caret></span></button>

  <ul class=dropdown-menu>

    <li><a href=# id=action-1>Action</a></li>

    <li><a href=# id=action-2>Another action</a></li>

    <li><a href=# id=action-3>Something else here</a></li>

  </ul>

</div><!-- /btn-group -->

and then with jQuery

jQuery(#action-1).click(function(e){

//do something

e.preventDefault();

});