2012-02-18 59 views
2

我使用Bootstrap 2.0構建了一個導航欄,與他們網站上的示例非常相似。我有一個子菜單(.dropdown-menu),我在其中放置了一個登錄表單(用戶名,密碼,提交)。Boostrap 2.0:將登錄表單添加到子菜單,防止關注焦點

一切都呈現得很好,但是當我點擊用戶名或密碼的輸入字段時,菜單似乎認爲我單擊了一個菜單項並關閉了子菜單。有關如何防止這種情況的任何提示?

解決方案:

$('.dropdown form').on('click', function (e) { 
    e.stopPropagation() 
}) 
+0

D'哦!我首先嚐試了'.preventDefault()',但沒有奏效。很高興這很簡單,感謝您發佈解決方案! – fholgado 2012-02-20 16:18:55

回答

1

添加persist類LI元素。

//編輯

JS代碼,使其實際工作:

(function($) { 
var toggle = '[data-toggle="dropdown"]'; 

function clearMenus() { 
    var toggleParent = $(toggle).parent(); 
    if(!toggleParent.hasClass('persist')) 
     toggleParent.removeClass('open'); 
} 

$(function() { 
    $('html').off('click.dropdown.data-api'); 
    $('html').on('click.dropdown.data-api', clearMenus); 
}); 
})(window.jQuery); 
+0

這似乎不起作用。也許這是Bootstrap 1.x中的一個特性?在2.0的CSS/JS文件中沒有提到「堅持」。 – 2012-02-18 10:13:20

+1

是的,我的壞,壽我沒有找到解決這個問題,這就是爲什麼我們使這個功能來完成這個:'(function($){ \t var toggle ='[data-toggle =「dropdown」]'; \t功能clearMenus(){ \t \t VAR toggleParent = $(切換).parent();(!toggleParent.hasClass( '堅持')) \t \t如果 \t \t \t toggleParent.removeClass( '公開') ; \t} \t $(function(){ \t \t $('html')。off('click.dropdown.data-api'); ('html')。on('click.dropdown.data-api',clearMenus); \t}); })(window.jQuery);' – 2012-02-18 10:21:21

+0

啊,優秀。謝謝! :) – 2012-02-18 10:29:06