Question

Having an issue with a drop-down inside a dropdown login menu using the twitter bootstrap framework. The second dropdown for the login box is not working. Is it possible to include a split button dropdown inside a dropdown like in the example below.

See this fiddle here.

http://jsfiddle.net/DMWFj/

Answer 1

When you clicked on second drop-down button, jQuery plugin “bootstrap-dropdown.js” hides all elements with class “open”.

You need to edit file “bootstrap-dropdown.js” (http://twitter.github.com/bootstrap/assets/js/bootstrap-dropdown.js) and rewrite function clearMenus().

Find next code in this file:

function clearMenus() {
    getParent($(toggle))
      .removeClass('open')
}

and replace it with:

function clearMenus($this) {
    getParent($this)
      .removeClass('open')
}

Find line clearMenus() near:

  , toggle: function (e) {
  var $this = $(this)
    , $parent
    , isActive

  if ($this.is('.disabled, :disabled')) return

  $parent = getParent($this)

  isActive = $parent.hasClass('open')

  clearMenus() // here

Replace line clearMenus() with clearMenus($this).

Here jsFiddle example: http://jsfiddle.net/BMBc3/