Javascript 单击页面上的任意位置时切换div内容

我有一个简单的滑块，在点击事件时打开/关闭

$('#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

container div之外的任何位置切换单击事件的状态

我试图将点击事件连接到页面上的任何位置，除了带有切换内容的那个

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

---

但这并没有给我想要的结果，div在向上滑动后立即向下滑动。

您可以使用此功能

// 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
    });
 });

简单地说，此函数表示如果元素不是目标，则执行操作

当您使用

$（文档）时，单击（…

您将需要

比如说

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

---

您当然删除了旧的事件处理程序，因此您没有两个事件处理程序同时切换