Twitter Bootstrap (3.0.0) 下拉和 PrototypeJS答案

【问题标题】：Twitter Bootstrap (3.0.0) Dropdown & PrototypeJSTwitter Bootstrap (3.0.0) 下拉和 PrototypeJS
【发布时间】：2013-08-22 20:49:17
【问题描述】：

我有一个应用程序，我正在慢慢地转换为 jQuery 并打算使用 Bootstrap。

但是，在使用 Bootstrap 3 时，单击下拉菜单后，菜单会正确显示。但是，在单击菜单或“关闭”菜单后。按钮/链接完全消失，直到页面刷新才会重新出现。

同理：https://github.com/twbs/bootstrap/issues/8379

上面的链接说要联系 google 群组，但我在群组中没有看到任何关于此的请求。

任何帮助将不胜感激！

谢谢， -大卫

所以使用@GeekNum88 的指导，如果你注释掉这些行，下拉菜单会起作用，但还不确定它的总体效果：

  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')
  })
 }

【问题讨论】：

出于好奇。您是否尝试过使用旧版本的引导程序？ getbootstrap.com/2.3.2 .. 如果是这样，你仍然得到相同的结果吗？
这是我对类似问题的回答之一stackoverflow.com/questions/15087129/…
尝试使用这个引导友好的prototype.js，因为它解决了我对类似问题的问题：stackoverflow.com/questions/19139063/…
这个链接也解决了我的问题@MWD

标签： jquery twitter-bootstrap twitter-bootstrap-3 prototypejs

【解决方案1】：

实现 Bootstrap 下拉菜单是一项非常简单的任务。请参阅 Bootstrap 文档中的 example 并按照以下步骤操作：

1.在 title 标签下方的 head 标签之间包含以下库

确保 jQuery 库在 Boostrap JS 库之前加载。

<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。将以下 HTML 粘贴到 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>

工作示例：

<!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>

要证明它有效，请参阅 the fiddle。

【讨论】：