Twitter引導停止傳播下拉打開

我有一個插件jOrgChart的div內的twitter引導下拉菜單。Twitter引導停止傳播下拉打開

我遇到的問題是，當我點擊按鈕打開下拉菜單時，它也觸發了父div中的一個單擊事件，它會對其他元素進行摺疊。

這是我的html：

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

我想阻止a.dropdown撥動的點擊冒泡到div.node，我試着用這樣的：

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

但現在下拉不起作用。

編輯

這是具體情況：http://jsfiddle.net/UTYma/2/（感謝喬Tuskan啓動小提琴）

來源

2012-09-07 Escobar5

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

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

停止傳播然後切換。 Example

我不得不將下拉菜單項添加到點擊處理程序以保持行爲不變。

來源

2012-09-07 18:43:18 Joe

不，那樣下拉式也不起作用。 – Escobar5

http://jsfiddle.net/UTYma/你可以編輯，因爲我不知道你在做什麼。 – Joe

我編輯它，div＃圖表丟失，你現在可以檢查下拉不起作用 – Escobar5

嘗試是這樣的：

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

      e.isDropDownToggleEvent =true; 
})

然後：

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

    return true;  
})

Yo你也可以嘗試把e.preventDefault（）或e.stopPropagation（）;而不是返回false。

來源

2012-09-07 18:39:04

事情是，用stopPropagation我已經停止事件冒泡，我遇到的問題是，現在下拉不起作用。 – Escobar5

我意識到幾秒鐘前我更新了我的答案。其基本思想是檢測從觸發器冒泡的點擊事件何時下降並完成相應的工作。 –

它應該是正確的答案。 – Billybobbonnet

如果我理解正確，你想避免關閉菜單。

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

來源

2012-09-07 19:02:48

不，我想讓菜單正常工作，我只想當用戶單擊按鈕打開菜單時，事件不會冒泡（因爲包含菜單的div也有一個事件可以摺疊另一個元素） – Escobar5

爲了清楚起見，我使用jOrgChart，並且在節點中有菜單：http://dl.dropbox.com/u/4151695/html/jOrgChart/example/example.html – Escobar5

我用

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

這類似於@喬的回答，但有點更通用的

來源

2015-07-14 10:30:08 thelem

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

你應該使用這個，而不是如上述方案沒有關閉下拉關注焦點。

來源

2016-05-24 06:56:14 AvcS

Twitter引導停止傳播下拉打開

回答

相關問題