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

Question

我有一个简单的 slider ，可以在点击事件时打开/关闭。

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