2013-08-22 13 views
11

Mam aplikację, którą powoli pracuję, aby przekonwertować do jQuery & zamierzał również użyć Bootstrap.Twitter Bootstrap (3.0.0) Dropdown & PrototypeJS

Jednak podczas korzystania z Bootstrap 3, po kliknięciu menu rozwijanego, menu wyświetla się poprawnie. Jednak po kliknięciu menu lub "zamknięciu" menu. Przycisk/link całkowicie zniknie i nie pojawi się ponownie, dopóki strona nie zostanie odświeżona.

samo jak ten: https://github.com/twbs/bootstrap/issues/8379

powyższy link mówi o kontakt grupę google, ale nie widziałem niczego wnioski dotyczące tego w grupie.

Każda pomoc będzie bardzo ceniona!

Dzięki, -David

Więc za pomocą @ kierunkiem GeekNum88 jest, jeśli skomentować te wiersze, listy rozwijanej działa, nie wiem, łączne skutki nim jeszcze:

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

Z ciekawości. Czy próbowałeś używać starszej wersji bootstrap? http://getbootstrap.com/2.3.2/ .. Jeśli tak, czy nadal otrzymujesz taki sam wynik? –

+1

Jest to jedna z moich odpowiedzi na podobne pytanie http://stackoverflow.com/questions/15087129/popover-hides-parent-element-if-used-with-prototype-js/15095654#15095654 –

+3

Spróbuj użyć tego przyjaznego dla bootstrapu prototype.js naprawił moje problemy dla podobnego pytania: http://stackoverflow.com/questions/19139063/twitter-bootstrap-3-dropdown-menu-disappears-when-used-with-prototype-js – MWD

Odpowiedz

2

Wdrażanie spadek Bootstrap -down-menu to bardzo proste zadanie. Zobacz example w dokumentacji Bootstrap i wykonaj następujące kroki:

1. zawierać następujące biblioteki pomiędzy główką tagi tuż pod tytułowej tagu

Upewnij się, że biblioteka jQuery dostaje ładowane przed biblioteką Jost Boostrap.

<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. Wklej następujący kod HTML w między ciałem tagów

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

przykład roboczych:

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

Aby udowodnić, że działa, zobaczthe fiddle.

+2

Czy nawet * przeczytałeś * pytanie? – dashard