Twitter Bootstrap (3.0.0) Dropdown & PrototypeJS

Tôi có một ứng dụng mà tôi đang từ từ làm việc để chuyển đổi sang jQuery & cũng sẽ sử dụng Bootstrap.Twitter Bootstrap (3.0.0) Dropdown & PrototypeJS

Tuy nhiên khi sử dụng Bootstrap 3, sau khi nhấp vào menu thả xuống, menu sẽ hiển thị chính xác. Tuy nhiên sau khi nhấp vào menu hoặc "đóng" menu. Nút/liên kết biến mất hoàn toàn và không xuất hiện lại cho đến khi làm mới trang.

Tương tự như này: https://github.com/twbs/bootstrap/issues/8379

Liên kết ở trên nói để liên lạc với nhóm google, nhưng tôi đã không nhìn thấy bất cứ điều gì liên quan đến yêu cầu này trong nhóm.

Bất kỳ trợ giúp nào sẽ được đánh giá rất nhiều!

Cảm ơn, -David

Vì vậy, sử dụng @ hướng dẫn GeekNum88, nếu bạn nhận xét ra những dòng này, thả xuống làm việc, không chắc chắn tổng tác động của nó được nêu ra:

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

Nguồn

2013-08-22 dcmoody

Hết sức tò mò. Bạn đã thử sử dụng phiên bản cũ của bootstrap chưa? http://getbootstrap.com/2.3.2/ .. Nếu vậy, bạn vẫn nhận được kết quả tương tự? –

Đây là một trong những câu trả lời của tôi cho một câu hỏi tương tự http://stackoverflow.com/questions/15087129/popover-hides-parent-element-if-used-with-prototype-js/15095654#15095654 –

Hãy thử sử dụng tính năng khởi động thân thiện này prototype.js vì nó đã khắc phục sự cố của tôi cho một câu hỏi tương tự: http://stackoverflow.com/questions/19139063/twitter-bootstrap-3-dropdown-menu-disappears-when-used-with-prototype-js – MWD

Thực hiện một thả Bootstrap -trình đơn xuống là một nhiệm vụ rất đơn giản. Xem example trong tài liệu Bootstrap và làm theo các bước sau:

1. Bao gồm các thư viện sau ở giữa người đứng đầu thẻ ngay dưới tiêu đề thẻ

Hãy chắc chắn rằng thư viện jQuery được được tải trước thư viện 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. Dán HTML sau ở giữa cơ thể thẻ

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

làm việc Ví dụ:

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

Để chứng minh điều đó đang làm việc, xemthe fiddle.

Nguồn

2014-03-07 09:41:13 Eugene

Thậm chí bạn có * đọc * câu hỏi không? – dashard

Twitter Bootstrap (3.0.0) Dropdown & PrototypeJS

Trả lời

Các vấn đề liên quan