當點擊頁面上的任何位置時切換div內容

Question

我有簡單的滑塊，我點擊事件打開/關閉。

$('#tab1-slideout span').click(function() { 
    manageToggleStateTab1(); 
}); 

function manageToggleStateTab1() { 
    if (tab1ToggleState == 'collapsed') { 
     $('#tab1-content').slideToggle('slow'); 
     $('#tab1-slideout span').addClass('active'); 
     tab1ToggleState = 'expanded'; 
}); 

，並在頁面加載我設置tab1ToggleState與初始值

var tab1ToggleState = 'collapsed'; 

這個偉大的工程，但我想這進一步擴大，以允許在單擊事件觸發狀態外#tab1-content div容器的任何地方。

我試圖連線單擊事件的任何地方網頁上除了一個與切換內容

$(document).not($('#tab1-content')).click(function() {  
    manageToggleStateTab1(); 
}); 

但這不給我想要的結果，馬上DIV滑下它向上滑動後。

Answer 1

您可以點擊事件使用此功能

// hide some divs when click on window 
function actionwindowclick(e , el , action){ 
    if (!$(el).is(e.target) // if the target of the click isn't the container... 
     && $(el).has(e.target).length === 0) // ... nor a descendant of the container 
     { 
      action(); 
     } 
    } 

$(document).click(function (e) {  
    actionwindowclick(e , '#tab1-content' , function(){ 
     // do action here 
    }); 
}); 

只是這個功能說，如果該元素是不是目標做動作

Working Demo

和當您使用$(document).click(...時，您將需要event.stopPropagation()

因此，例如

$('#tab1-slideout span').click(function (event) { 
    event.stopPropagation(); 
    manageToggleStateTab1(); 
}); 

Working Example