Twitter Bootstrap (3.0.0) Dropdown & PrototypeJS

Question

I have an application that i'm slowly working to convert to jQuery & was going to use Bootstrap as well.

However when using Bootstrap 3, after clicking the drop down, the menu displays correctly. However after click off the menu or "closing" the menu. The button/link completely disappear and doesn't reappear until page refresh.

Same as this: https://github.com/twbs/bootstrap/issues/8379

The above link says to contact the google group, but I haven't seen anything requests regarding this in the group.

Any help would be greatly appreciated!

Thanks, -David

So using @GeekNum88's guidance, if you comment out these lines, the dropdown works, not sure the total effects of it yet:

  function clearMenus() {
    $(backdrop).remove()
    $(toggle).each(function (e) {
    var $parent = getParent($(this))
    if (!$parent.hasClass('open')) return
//      $parent.trigger(e = $.Event('hide.bs.dropdown'))
//      if (e.isDefaultPrevented()) return
    $parent.removeClass('open').trigger('hidden.bs.dropdown')
  })
 }

Out of curiosity. Have you tried using the older version of bootstrap? http://getbootstrap.com/2.3.2/ .. If so, do you still get the same result? — khollenbeck, Aug 22 '13 at 21:41
This is one of my answers for a similar question http://stackoverflow.com/questions/15087129/popover-hides-parent-element-if-used-with-prototype-js/15095654#15095654 — Geek Num 88, Aug 22 '13 at 21:45
Try using this bootstrap friendly prototype.js as it fixed my issues for a similar question: http://stackoverflow.com/questions/19139063/twitter-bootstrap-3-dropdown-menu-disappears-when-used-with-prototype-js — MWD, Oct 03 '13 at 15:27

score 2 · Answer 1 · answered Mar 07 '14 at 09:41

Implementing a Bootstrap drop-down menu is a very simple task. See the example in the Bootstrap documentation and follow these steps:

1. Include the following libraries in between the head tags just beneath the title tag

Make sure the jQuery library gets loaded before the Boostrap JS library.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

2. Paste the following HTML in between the body tags

<div class="btn-group">
  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
    Action <span class="caret"></span>
  </button>
  <ul class="dropdown-menu" role="menu">
    <li><a href="#">Action</a></li>
    <li><a href="#">Another action</a></li>
    <li><a href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a href="#">Separated link</a></li>
  </ul>
</div>

Working Example:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap Dropdown</title>

<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>

</head>

<body>
    <div class="btn-group">
      <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
        Action <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a href="#">Action</a></li>
        <li><a href="#">Another action</a></li>
        <li><a href="#">Something else here</a></li>
        <li class="divider"></li>
        <li><a href="#">Separated link</a></li>
      </ul>
    </div>
</body>
</html>

To prove it is working, see the fiddle.

Twitter Bootstrap (3.0.0) Dropdown & PrototypeJS

1 Answers1