2011-11-04 45 views
0

我有一個切換和文檔功能的問題,也許有人可以幫助我提高我的功能。切換功能與文檔點擊關閉

我有一個切換功能,可以打開和關閉一個元素。如果你點擊元素,它會打開。然後,如果您再次點擊它,它會關閉,切換功能工作。然而,我進入了下一個級別,如果你點擊元素,它會打開,如果你點擊元素(文檔)外部,它會關閉。

但是,當我點擊外部後再次單擊該元素時,我必須點擊兩次,因爲它沒有關閉最終的切換操作。我如何做到這一點,所以當我點擊外部關閉元素時,我不必再點擊元素兩次。這有意義嗎?

<ul> 
<li id='drop'>down</li> 
<ul id='menu'> 
<li>menu 1</li> 
<li>menu 2</li> 
<li>menu 3</li> 
</ul> 

$('li#drop').toggle(function() { 
    //show its submenu 
    $('ul', this).show(); 
}, function() { 
    //hide its submenu 
    $('ul', this).hide(); 
} 
); 
$(document).click(function(){ 
    $('ul#menu').hide(); 
}); 

回答

2

而不是使用.toggle(),你可以測試裏被點擊

$('li#drop').click(function(e){ 
    e.stopPropagation(); 

    if($('ul#menu').is(':visible')) { 
    $('ul#menu').hide(); 
    } 
    else { 
    $('ul#menu').show(); 
    } 
}); 
+0

時似乎並不喜歡的工作時,$(文件)。點擊(函數UL可見......正在它不工作我試圖讓它工作 – hellomello

+0

對不起,我的代碼中有幾個錯誤嘗試更新的代碼 – Yisroel

+0

您還需要停止點擊事件的傳播,否則點擊會冒泡到文檔並重新隱藏菜單我已更新我的代碼以包含該文件 – Yisroel

2

toggle()存儲對象的數據,以保持它的軌道被切換的切換狀態(所以它知道哪些功能它的啓動下一次調用),所以當你改變對象的隱藏狀態,而不讓toggle()更新那些數據會在下次執行時混淆並調用錯誤的函數。

要解決此問題,您應該不要使用toggle(),而只是自己實施切換行爲,以便在從多個不同位置調用時可正常工作。