Twitter tuyên truyền dừng bootstrap trên menu thả xuống mở

Question

Tôi có một trình đơn thả xuống twitter bootstrap bên trong div với plugin jOrgChart.

Sự cố tôi gặp phải là khi tôi nhấp vào nút để mở trình đơn thả xuống, nó cũng kích hoạt sự kiện nhấp chuột trong div cha mẹ sẽ làm sụp đổ các phần tử khác.

Đây là html của tôi:

<div id="chart"> 
<div class="node"> 
    <div class="btn-group"> 
     <a class="btn dropdown-toggle" data-toggle="dropdown" href="#"> 
     Actions 
     <span class="caret"></span> 
     </a> 
     <ul class="dropdown-menu" style="text-align:left;"> 
      <li><a href="#">Edit</a></li> 
      <li><a href="#">Delete</a></li> 
     </ul> 
    </div> 
</div> 

<div class="node"> 
... 
</div> 

tôi muốn ngăn chặn các nhấp chuột của a.dropdown-chuyển đổi từ bọt để div.node, tôi đã cố gắng với điều này:

$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) { 
      e.stopPropagation(); 
     }); 

Nhưng bây giờ trình đơn thả xuống không hoạt động.

EDIT

Đây là trường hợp cụ thể: http://jsfiddle.net/UTYma/2/ (Nhờ Joe Tuskan để bắt đầu fiddle)

Answer 1

$("#orgchart").jOrgChart({ chartElement: '#chart' }); 

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) { 
    e.stopPropagation(); 
    $('.dropdown-menu').toggle(); 
});​ 

Dừng Tuyên truyền rồi chuyển đổi. Example

---

Tôi phải thêm các mục trình đơn thả xuống vào trình xử lý nhấp chuột để giữ cho hành vi không đổi.

Answer 2

Hãy thử một cái gì đó như thế này:

$("div#chart div.btn-group > a.dropdown-toggle").click(function (e) { 

      e.isDropDownToggleEvent =true; 
}) 

Sau đó:

$("div.node").click(function (e) { 
    if (e.isDropDownToggleEvent != null && e.isDropDownToggleEvent) 
     return false; 

    return true;  
}) 

Yo bạn cũng có thể thử đặt e.preventDefault() hoặc e.stopPropagation(); thay vì trả về false.

Answer 3

Nếu tôi hiểu chính xác, bạn muốn tránh menu đóng.

$("div#chart .dropdown-menu li").bind('click',function (e) { 
      e.stopPropagation(); 
     },false); 

Answer 4

tôi đã sử dụng

$('.multiselect').on('click', function (e) { 
    $(this).next('.dropdown-menu').toggle(); 
    e.stopPropagation(); 
}); 

này tương tự như @ câu trả lời của Joe, nhưng một chút chung chung hơn

Answer 5

$("div#chart div.btn-group > a.dropdown-toggle, .dropdown-menu li a").click(function(e) { 
    e.stopPropagation(); 
    $(this).closest('.dropdown').toggleClass('open'); 
});​ 

Bạn nên sử dụng này để thay thế như trên giải pháp không đóng menu thả xuống tập trung.