Twitter Bootstrap (3.0.0) Раскрывающийся список и прототип JS

У меня есть приложение, которое я медленно работаю для преобразования в 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')
  })
 }

ОТВЕТЫ

Ответ 1

Внедрение раскрывающегося меню Bootstrap - очень простая задача. См. пример в документации Bootstrap и выполните следующие действия:

1. Включите следующие библиотеки между тегами заголовка только под тегом title

Убедитесь, что библиотека 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-код между тегами тела

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

Чтобы доказать, что он работает, см. скрипка.